首页 > > 网页制作 > css >

【前端】响应式媒体查询

2018-06-24 01:44:00来源：未知阅读 ()

响应式媒体查询

媒体查询

　　从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　在清单 1 中，media 属性定义了应该用于指定每种媒体类型的样式表：

　　screen 适用于计算机彩色屏幕。

　　print 适用于打印预览模式下查看的内容或者打印机打印的内容。

　　作为 CSS 3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达。如果为True，则继续使用样式表。如果为False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。

　　媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。

清单 2. 媒体查询规则
@media all and (min-width: 800px) { ... }

　　根据清单2中的标记，所有最小水平屏幕宽度为 800 像素的屏幕（屏幕和打印等）都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：

　　@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

　　(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素则会告诉浏览器只运用下列 CSS。

　　请注意，在清单 2 中，可以省略关键词 all 和 and。在将某个媒体查询应用于所有媒体类型时，会省略 all。后面的 and 也是可选的。

　　使用简写语法重新编写媒体查询，如清单 3 所示。

清单 3. 简写语法
@media (min-width:800px) { ... }

　　媒体查询也可以包含复杂表达式。例如，如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式，则需要按照清单 4 中的规则来做。

清单 4. 复杂表达式
@media (min-width:800px) and (max-width:1200px) { ... }

　　在您的表达式中，您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向，只需添加另一个 and 关键词，后跟 orientation 媒体查询，如清单 5 所示。

清单 5. and 条件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

　　清单 5 中的媒体查询仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。（通常，方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。）如果其中一个条件为 False，则无法应用媒体查询规则。

　　and 关键词的反义词是 or 关键词。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True，如清单 6 所示。

清单 6. or 关键词
@media (min-width:800px) or (orientation:portrait) { ... }

　　如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。

　　另一个保存在词库中的媒体查询关键词是 not。位于媒体查询的开始处，not 会忽略结果。换句话说，如果该查询本来在没有 not 关键词的情况下为 true，那么现在它将为 false。清单 7 展示一个示例。

清单 7. 使用 not
@media (not min-width:800px) { ... }

　　仅从英文意思上理解，清单 7 中代码的表示：当最小宽度不是 800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

有用的媒体特性

　　媒体很多特性，比如宽度、颜色和网格，您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。要设计响应式网站，只需要了解一些媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是 portrait 或 landscape。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。当高度大于长度时，则认为屏幕是纵向模式，当宽度大于高度时，则认为屏幕是横向模式。

　　清单 8 显示了一个使用 orientation 媒体模式查询的示例。

清单 8. orientation 媒体查询
@media (orientation:portrait) { ... }

　　高度和宽度行为十分相似，都支持以 min- 和 max- 为前缀。清单 9 展示了一个有效的媒体查询。

清单 9. 高度和宽度媒体查询
@media (min-width:800px) and (min-height:400px) { ... }

　　如果没有 min- 或 max- 前缀，您还可以使用 width 和 height 媒体特性，如清单 10 所示。

清单 10. 不带 min- 和 max- 前缀
@media (width:800px) and (height:400px) { ... }

　　当屏幕正好是 800 像素宽、400 像素高时，可以使用清单 10 中的媒体查询。现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。

　　作为媒体查询大小范围的后续内容，下一节将讨论一些常见的媒体查询，在设计一个响应式网站时，您可能会发现它们非常有用。

常见媒体查询

　　因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。

如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { ... }
如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { ... }
如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { ... }
如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { ... }

SASS 中的媒体查询

　　SASS 行为中的媒体查询与普通 CSS 中的完全相同，但有一个例外：它们可以嵌套在其他 CSS 规则中。当一个媒体查询嵌套在另一个 CSS 规则中时，会将规则置于样式表的顶层，如清单 11 所示。

清单 11. 嵌套的媒体查询
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

　　清单 11 中的示例将编译到清单 12 的代码中。

清单 12. 编译结果
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

组织你的媒体查询

　　现在，我们已经了解了如何编写媒体查询，是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的 CSS 代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。

　　第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中，这使得显示逻辑能够清楚地划分出来，更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表，则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时，需要创建多个位置进行查看，这使得网站 CSS 的维护变得更加困难。

　　第二个方法是在现有样式表中使用媒体查询，该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时，这种做法可以创建更多源代码合并工作，但这是所有基于团队的软件开发都可以管理且常见的一部分。

没有所谓正确或错误方法。您只需选择最适合您的项目和团队的方法即可。

浏览器支持

　　到现在为止，您可能已经相信 CSS 媒体查询是一个强大的工具，而且想知道哪些浏览器支持 CSS 媒体查询。以下是这方面的好消息和坏消息。

好消息是：大多数现代浏览器（包括智能手机上的浏览器）都支持 CSS 媒体查询。

坏消息是：最近，来自 Redmond 的 Windows? Internet Explorer? 8 浏览器不支持媒体查询。

　　对于大多数专业 Web 开发人员来说，这意味着您需要提供一个解决方案，以便在 Internet Explorer 中支持媒体查询。下列解决方案是一个名为 respond.js 的 JavaScript polyfill。

带有 respond.js 的 Polyfill

　　Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库，使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。最终能够在原本不支持的浏览器上运行媒体查询。

　　由于这是一个基于 JavaScript 的解决方案，所以浏览器需要支持 JavaScript，以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大width 媒体查询。这并不是适用于所有可能 CSS 媒体查询的一个替代。

　　Respond.js 是您可以选择的诸多可用开源媒体查询 polyfills之一。如果您觉得 respond.js 无法满足您的需求，在进行一个小小的研究之后，您就会发现几个替代方案。

@media媒体查询判断ipad和iPhone各版本

　　Media Queries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

/* 判断ipad */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px){  
/* style */  
}  

/* ipad横屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : landscape){  
 /* style */  
 }  

 /* ipad竖屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : portrait){  
 /* style */  
}  

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */  
@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 568px){  
 /* style */  
}  

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */  

@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 480px){  
/* style */  
 }  

/* iphone5分辨率 */  
screen Width = 320px (css像素)  
screen Height = 568px (css像素)  
screen Width = 640px (实际像素)  
screen Height = 1136px (实际像素)  
Device-pixel-ratio:2  

/* iphone4-iphone4s分辨率 */  
screen Width = 320px (css像素)  
screen Height = 480px (css像素)  
screen Width = 640px (实际像素)  
screen Height = 960px (实际像素)  
Device-pixel-ratio:2

一、最大宽度Max Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

　　表示：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

二、多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

　　表示：当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

三、设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

　　表示：iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

四、not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

　　表示：not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

五、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />   
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

六、其他

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

　　表示：另外还有使用逗号（，）被用来表示并列或者表示或，style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

媒体查询判断ipad和iPhone各版本

判断ipad

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}

ipad横屏

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}

ipad竖屏

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}

判断iphone5 *//* 横屏竖屏判断方法与ipad一样

@media only screen

 and (min-device-width : 320px)

 and (max-device-width : 568px){

/* style */

 }

判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

 }

iphone5分辨率

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (实际像素)

screen Height = 1136px (实际像素)

Device-pixel-ratio:2

iphone4-iphone4s分辨率

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (实际像素)

screen Height = 960px (实际像素)

Device-pixel-ratio:2

Bootstrap CSS3媒体查询断点

　　Bootstrap响应式设计，就是一个典型的媒体查询CSS框架，它设定了某些媒体查询节点，根据不同设备宽度，写不同的断点位置来做响应式查询。

Bootstrap推荐的媒体查询样式如下：

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/ 
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {  
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
}
 
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
 
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
 
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}
 
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {  
}

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。下面是Bootstrap媒体查询的一些文档，希望对你有所帮助。

简介

　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

媒体查询

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

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 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) { ... }

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

实例：从堆叠到水平排列

　　使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

实例：流式布局容器

　　将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

实例：移动设备和桌面屏幕

　　是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-*和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
 
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

实例：手机、平板、桌面

　　在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

实例：多余的列（column）将另起一行排列

　　如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

响应式列重置

　　即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
 
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　　除了列在分界点清除响应，您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

列偏移

　　使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列

　　为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less mixin 和变量

　　除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

变量

　　通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

　　mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();
 
  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
 
  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}
 
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

实例展示

　　你可以重新修改这些变量的值，或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局（列之间有间隔）的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有