布局的时候什么时候用xs，sm，md，lg

来源：蜘蛛抓取(WebSpider) 时间：2017-11-03 02:05 标签： col xs col sm col md
15被浏览11821分享邀请回答0添加评论分享收藏感谢收起Bootstrap响应式布局_PHP程序员，雷雪松的博客
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。使用了四种栅格选项来形成栅格系统，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，他们分别是col-xs、col-sm、col-md、col-lg.lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是 Extra Small的缩写。
移动设备优先策略
决定什么是最重要的。
优先设计更小的宽度。基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
随着屏幕大小的增加而添加元素。
媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
让我们来看下面这行代码：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。
下表总结了 Bootstrap 网格系统如何跨多个设备工作：
超小设备手机（&768px）
小型设备平板电脑（≥768px）
中型设备台式电脑（≥992px）
大型设备台式电脑（≥1200px）
一直是水平的
以折叠开始，断点以上是水平的
以折叠开始，断点以上是水平的
以折叠开始，断点以上是水平的
最大容器宽度
None (auto)
Class 前缀
（一个列的每边分别 15px）
（一个列的每边分别 15px）
（一个列的每边分别 15px）
（一个列的每边分别 15px）

我要回帖

更多关于 col xs col sm col md 的文章

 

随机推荐