Bootstrap 媒体查询


媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

  1. /* 超小屏幕(手机,小于 768px) */ 
  2. /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ 
  3.  
  4. /* 小屏幕(平板,大于等于 768px) */ 
  5. @media (min-width: @screen-sm-min) { ... } 
  6.  
  7. /* 中等屏幕(桌面显示器,大于等于 992px) */ 
  8. @media (min-width: @screen-md-min) { ... } 
  9.  
  10. /* 大屏幕(大桌面显示器,大于等于 1200px) */ 
  11. @media (min-width: @screen-lg-min) { ... } 

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

  1. @media (max-width: @screen-xs-max) { ... } 
  2. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 
  3. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
  4. @media (min-width: @screen-lg-min) { ... }

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)