【前端】响应式媒体查询
2017-08-09 23:22
316 查看
响应式媒体查询
清单1.使用媒体类型
<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
在清单1中,media属性定义了应该用于指定每种媒体类型的样式表:
screen适用于计算机彩色屏幕。
print适用于打印预览模式下查看的内容或者打印机打印的内容。
媒体查询
从CSS版本2开始,就可以通过媒体类型在CSS中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单1展示了一个示例。在清单1中,media属性定义了应该用于指定每种媒体类型的样式表:
screen适用于计算机彩色屏幕。
print适用于打印预览模式下查看的内容或者打印机打印的内容。
作为CSS3规范的一部分,可以扩展媒体类型函数,并允许在样式表中使用更精确的显示规则。媒体查询是评估True或False的一种表达。如果为True,则继续使用样式表。如果为False,则不能使用样式表。这种简单逻辑通过表达式变得更加强大,使您能够更灵活地对特定的设计场景使用自定义的显示规则。
媒体查询包含一个媒体类型,后跟一个或多个检查特定条件(如最小的屏幕宽度)的表达式。样式表中的媒体查询看起来如清单2中的示例所示。
根据清单2中的标记,所有最小水平屏幕宽度为800像素的屏幕(屏幕和打印等)都应使用如下CSS规则。该规则在示例中省略号所在的地方。对于该媒体查询:
@mediaall是媒体类型,也就是说,将此CSS应用于所有媒体类型。
(min-width:800px)是包含媒体查询的表达式,如果浏览器的最小宽度为800像素则会告诉浏览器只运用下列CSS。
请注意,在清单2中,可以省略关键词all和and。在将某个媒体查询应用于所有媒体类型时,会省略all。后面的and也是可选的。
使用简写语法重新编写媒体查询,如清单3所示。
媒体查询也可以包含复杂表达式。例如,如果您想要创建一个仅在最小宽度为800像素且最大宽度为1200像素时应用的样式,则需要按照清单4中的规则来做。
在您的表达式中,您可以根据自己的喜好使用任意数量的and条件。如果您想要增加其他条件来检查特定的屏幕方向,只需添加另一个and关键词,后跟orientation媒体查询,如清单5所示。
清单5中的媒体查询仅在宽度为800到1200像素且方向是纵向时才能激活。(通常,方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。)如果其中一个条件为False,则无法应用媒体查询规则。
and关键词的反义词是or关键词。和and一样,这些条件组合在一起会构成复杂表达式。如果其中有一个条件为True,那么整个表达式或分离的两个条件都会为True,如清单6所示。
如果宽度至少是800像素或方向是纵向的,则会应用该规则。
另一个保存在词库中的媒体查询关键词是not。位于媒体查询的开始处,not会忽略结果。换句话说,如果该查询本来在没有not关键词的情况下为true,那么现在它将为false。清单7展示一个示例。
仅从英文意思上理解,清单7中代码的表示:当最小宽度不是800像素时,会应用下列CSS规则。这些示例只是将像素作为媒体查询中的测量单位,但是测量单位并不仅限于像素。您可以使用任何有效的CSS测量单位,比如厘米(cm)、英寸(in)、毫米(mm)等。
有用的媒体特性
媒体很多特性,比如宽度、颜色和网格,您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。要设计响应式网站,只需要了解一些媒体特性:方向、宽度和高度。作为一个简单媒体特性,方向的值可以是portrait或landscape。这些值适用于持有手机或平板电脑的用户,使您可以根据两个形状因素来优化内容。当高度大于长度时,则认为屏幕是纵向模式,当宽度大于高度时,则认为屏幕是横向模式。清单8显示了一个使用orientation媒体模式查询的示例。
高度和宽度行为十分相似,都支持以min-和max-为前缀。清单9展示了一个有效的媒体查询。
如果没有min-或max-前缀,您还可以使用width和height媒体特性,如清单10所示。
当屏幕正好是800像素宽、400像素高时,可以使用清单10中的媒体查询。现实中,像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下,响应式设计会使用范围来执行屏幕检测。
作为媒体查询大小范围的后续内容,下一节将讨论一些常见的媒体查询,在设计一个响应式网站时,您可能会发现它们非常有用。
常见媒体查询
因为Apple首次向市场推出了用户智能手机和平板电脑产品,所以下列大多数媒体查询都是基于这些型号的设备。SASS中的媒体查询
SASS行为中的媒体查询与普通CSS中的完全相同,但有一个例外:它们可以嵌套在其他CSS规则中。当一个媒体查询嵌套在另一个CSS规则中时,会将规则置于样式表的顶层,如清单11所示。
清单11中的示例将编译到清单12的代码中。
组织你的媒体查询
现在,我们已经了解了如何编写媒体查询,是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的CSS代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中,这使得显示逻辑能够清楚地划分出来,更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表,则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个CSS中的一个元素时,需要创建多个位置进行查看,这使得网站CSS的维护变得更加困难。
第二个方法是在现有样式表中使用媒体查询,该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时,这种做法可以创建更多源代码合并工作,但这是所有基于团队的软件开发都可以管理且常见的一部分。
没有所谓正确或错误方法。您只需选择最适合您的项目和团队的方法即可。
浏览器支持
到现在为止,您可能已经相信CSS媒体查询是一个强大的工具,而且想知道哪些浏览器支持CSS媒体查询。以下是这方面的好消息和坏消息。好消息是:大多数现代浏览器(包括智能手机上的浏览器)都支持CSS媒体查询。
坏消息是:最近,来自Redmond的Windows®InternetExplorer®8浏览器不支持媒体查询。
对于大多数专业Web开发人员来说,这意味着您需要提供一个解决方案,以便在InternetExplorer中支持媒体查询。下列解决方案是一个名为respond.js的JavaScriptpolyfill。
带有respond.js的Polyfill
Respond.js是一个极小的增强Web浏览器的JavaScript库,使得原本不支持CSS媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有CSS引用,并使用媒体查询分析CSS规则。然后,该脚本会监控浏览器宽度变化,添加或删除与CSS中媒体查询匹配的样式。最终能够在原本不支持的浏览器上运行媒体查询。由于这是一个基于JavaScript的解决方案,所以浏览器需要支持JavaScript,以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大width媒体查询。这并不是适用于所有可能CSS媒体查询的一个替代。
Respond.js是您可以选择的诸多可用开源媒体查询polyfills之一。如果您觉得respond.js无法满足您的需求,在进行一个小小的研究之后,您就会发现几个替代方案。
@media媒体查询判断ipad和iPhone各版本
MediaQueries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。一、最大宽度MaxWidth
表示:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
二、多个MediaQueries使用
表示:当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
三、设备屏幕的输出宽度DeviceWidth
表示:iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率
四、not关键字
表示:not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
五、only关键字
六、其他
表示:另外还有使用逗号(,)被用来表示并列或者表示或,style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。
媒体查询判断ipad和iPhone各版本
判断ipadipad横屏
ipad竖屏
判断iphone5*//*横屏竖屏判断方法与ipad一样
判断iphone4-iphone4s*//*横屏竖屏判断方法与ipad一样
iphone5分辨率
iphone4-iphone4s分辨率
BootstrapCSS3媒体查询断点
Bootstrap响应式设计,就是一个典型的媒体查询CSS框架,它设定了某些媒体查询节点,根据不同设备宽度,写不同的断点位置来做响应式查询。
Bootstrap推荐的媒体查询样式如下:
=Bootstrap3MediaQueries=
==================================================*/
/*==========MobileFirstMethod==========*/
/*Custom,iPhoneRetina*/
@mediaonlyscreenand(min-width:320px){
}
/*ExtraSmallDevices,Phones*/
@mediaonlyscreenand(min-width:480px){
}
/*SmallDevices,Tablets*/
@mediaonlyscreenand(min-width:768px){
}
/*MediumDevices,Desktops*/
@mediaonlyscreenand(min-width:992px){
}
/*LargeDevices,WideScreens*/
@mediaonlyscreenand(min-width:1200px){
}
/*==========Non-MobileFirstMethod==========*/
/*LargeDevices,WideScreens*/
@mediaonlyscreenand(max-width:1200px){
}
/*MediumDevices,Desktops*/
@mediaonlyscreenand(max-width:992px){
}
/*SmallDevices,Tablets*/
@mediaonlyscreenand(max-width:768px){
}
/*ExtraSmallDevices,Phones*/
@mediaonlyscreenand(max-width:480px){
}
/*Custom,iPhoneRetina*/
@mediaonlyscreenand(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文件中使用以下媒体查询(mediaquery)来创建关键的分界点阈值。
/*没有任何媒体查询相关的代码,因为这在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(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) | 是 | |||
列排序 | 是 |
实例:从堆叠到水平排列
使用单一的一组.col-md-*栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在”.row内。
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
</div>
<divclass="row">
<divclass="col-md-8">.col-md-8</div>
<divclass="col-md-4">.col-md-4</div>
</div>
<divclass="row">
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
</div>
<divclass="row">
<divclass="col-md-6">.col-md-6</div>
<divclass="col-md-6">.col-md-6</div>
</div>
实例:流式布局容器
将最外面的布局元素
.container修改为
.container-fluid,就可以将固定宽度的栅格布局转换为100%宽度的布局。
<divclass="row">
...
</div>
</div>
实例:移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即
.col-xs-*和
.col-md-*。请看下面的实例,研究一下这些是如何工作的。
<divclass="row">
<divclass="col-xs-12col-md-8">.col-xs-12.col-md-8</div>
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
</div>
<!--Columnsstartat50%wideonmobileandbumpupto33.3%wideondesktop-->
<divclass="row">
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
</div>
<!--Columnsarealways50%wide,onmobileanddesktop-->
<divclass="row">
<divclass="col-xs-6">.col-xs-6</div>
<divclass="col-xs-6">.col-xs-6</div>
</div>
实例:手机、平板、桌面
在上面案例的基础上,通过使用针对平板设备的
.col-sm-*类,我们来创建更加动态和强大的布局吧。
<divclass="col-xs-12col-sm-6col-md-8">.col-xs-12.col-sm-6.col-md-8</div>
<divclass="col-xs-6col-md-4">.col-xs-6.col-md-4</div>
</div>
<divclass="row">
<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>
<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>
<!--Optional:cleartheXScolsiftheircontentdoesn'tmatchinheight-->
<divclass="clearfixvisible-xs-block"></div>
<divclass="col-xs-6col-sm-4">.col-xs-6.col-sm-4</div>
</div>
实例:多余的列(column)将另起一行排列
如果在一个
.row内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
<divclass="col-xs-9">.col-xs-9</div>
<divclass="col-xs-4">.col-xs-4<br>Since9+4=13>12,this4-column-widedivgetswrappedontoanewlineasonecontiguousunit.</div>
<divclass="col-xs-6">.col-xs-6<br>Subsequentcolumnscontinuealongthenewline.</div>
</div>
响应式列重置
即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用
.clearfix和响应式工具类。
<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>
<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>
<!--Addtheextraclearfixforonlytherequiredviewport-->
<divclass="clearfixvisible-xs-block"></div>
<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>
<divclass="col-xs-6col-sm-3">.col-xs-6.col-sm-3</div>
</div>
除了列在分界点清除响应,您可能需要重置偏移,后推或前拉某个列。请看此栅格实例。
<divclass="col-sm-5col-md-6">.col-sm-5.col-md-6</div>
<divclass="col-sm-5col-sm-offset-2col-md-6col-md-offset-0">.col-sm-5.col-sm-offset-2.col-md-6.col-md-offset-0</div>
</div>
<divclass="row">
<divclass="col-sm-6col-md-5col-lg-6">.col-sm-6.col-md-5.col-lg-6</div>
<divclass="col-sm-6col-md-5col-md-offset-2col-lg-6col-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)的宽度。
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4col-md-offset-4">.col-md-4.col-md-offset-4</div>
</div>
<divclass="row">
<divclass="col-md-3col-md-offset-3">.col-md-3.col-md-offset-3</div>
<divclass="col-md-3col-md-offset-3">.col-md-3.col-md-offset-3</div>
</div>
<divclass="row">
<divclass="col-md-6col-md-offset-3">.col-md-6.col-md-offset-3</div>
</div>
嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的
.row元素和一系列
.col-sm-*元素到已经存在的
.col-sm-*元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。
<divclass="col-sm-9">
Level1:.col-sm-9
<divclass="row">
<divclass="col-xs-8col-sm-6">
Level2:.col-xs-8.col-sm-6
</div>
<divclass="col-xs-4col-sm-6">
Level2:.col-xs-4.col-sm-6
</div>
</div>
</div>
</div>
列排序
<divclass="col-md-9col-md-push-3">.col-md-9.col-md-push-3</div>
<divclass="col-md-3col-md-pull-9">.col-md-3.col-md-pull-9</div>
</div>
Lessmixin和变量
除了用于快速布局的预定义栅格类,Bootstrap还包含了一组Less变量和mixin用于帮你生成简单、语义化的布局。
变量
通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。我们使用这些变量生成预定义的栅格类,如上所示,还有如下所示的定制mixin。
@grid-gutter-width:30px;
@grid-float-breakpoint:768px;
mixin
mixin用来和栅格变量一同使用,为每个列(column)生成语义化的CSS代码。
.make-row(@gutter:@grid-gutter-width){
//Thenclearthefloatedcolumns
.clearfix();
@media(min-width:@screen-sm-min){
margin-left:(@gutter/-2);
margin-right:(@gutter/-2);
}
//Negativemarginnestedrowsouttoalignthecontentofcolumns
.row{
margin-left:(@gutter/-2);
margin-right:(@gutter/-2);
}
}
//Generatetheextrasmallcolumns
.make-xs-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);
//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@grid-float-breakpoint){
float:left;
width:percentage((@columns/@grid-columns));
}
}
//Generatethesmallcolumns
.make-sm-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);
//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-sm-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}
//Generatethesmallcolumnoffsets
.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));
}
}
//Generatethemediumcolumns
.make-md-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);
//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-md-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}
//Generatethemediumcolumnoffsets
.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));
}
}
//Generatethelargecolumns
.make-lg-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);
//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-lg-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}
//Generatethelargecolumnoffsets
.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。下面就是一个利用默认设置生成两列布局(列之间有间隔)的案例。
.make-row();
}
.content-main{
.make-lg-column(8);
}
.content-secondary{
.make-lg-column(3);
.make-lg-column-offset(1);
}
<divclass="wrapper">
<divclass="content-main">...</div>
<divclass="content-secondary">...</div>
</div>