我正在尝试 LESS(不喜欢 SASS 语法),并一直试图找出用它进行媒体查询的最佳方法是什么。
我通读了this http://alwaystwisted.com/post.php?s=2012-05-05-everyday-im-bubbling-with-media-queries-and-less博客文章介绍了如何使用 LESS“执行”媒体查询,但它指出了这样一个事实:这会导致所有媒体查询被分离并分散在生成的 CSS 中。这并没有真正困扰我(我可以不太关心结果,而更关心它的工作原理)。令我困扰的是一条评论,其中谈到了从 iOS 设备观看时出现的问题,评论者发现,一旦媒体查询得到整合,问题就得到了解决。
有没有人找到使用 LESS 媒体查询的好解决方案?
我设想这项工作的方式会是这样的......
//Have an overall structure...
.overall(){
//Have ALL your CSS that would be modified by media queries and heavily use
//variables that are set inside of each media queries.
}
@media only screen and (min-width: 1024px){
//Define variables for this media query (widths/etc)
.overall
}
我知道这可能存在一些问题,但当前的设置似乎没有那么有益。
所以我想我的问题是是否有任何好的解决方案/技巧来允许分组媒体查询?
(以防万一,我使用 dotless 作为引擎来解析我的.less
files)
首先,您在问题中给出的解决方案肯定有一定的用处。
然而,我认为的一件事是,将所有媒体查询变量定义为彼此“靠近”会很好(您的解决方案将在每个媒体查询调用下都有它们)。因此,我提出以下建议作为替代解决方案。它也有缺点,其中之一可能是需要预先编写更多代码。
更少的代码
//define our break points as variables
@mediaBreak1: 800px;
@mediaBreak2: 1024px;
@mediaBreak3: 1280px;
//this mixin builds the entire media query based on the break number
.buildMediaQuery(@min) {
@media only screen and (min-width: @min) {
//define a variable output mixin for a class included in the query
.myClass1(@color) {
.myClass1 {
color: @color;
}
}
//define a builder guarded mixin for each break point of the query
//in these is where we change the variable for the media break (here, color)
.buildMyClass1() when (@min = @mediaBreak1) {
.myClass1(red);
}
.buildMyClass1() when (@min = @mediaBreak2) {
.myClass1(green);
}
.buildMyClass1() when (@min = @mediaBreak3) {
.myClass1(blue);
}
//call the builder mixin
.buildMyClass1();
//define a variable output mixin for a nested selector included in the query
.mySelector1(@fontSize) {
section {
width: (@min - 40);
margin: 0 auto;
a {
font-size: @fontSize;
}
}
}
//Again, define a builder guarded mixin for each break point of the query
//in these is where we change the variable for the media break (here, font-size)
.buildMySelector1() when (@min = @mediaBreak1) {
.mySelector1(10px);
}
.buildMySelector1() when (@min = @mediaBreak2) {
.mySelector1(12px);
}
.buildMySelector1() when (@min = @mediaBreak3) {
.mySelector1(14px);
}
//call the builder mixin
.buildMySelector1();
//ect., ect., etc. for as many parts needed in the media queries.
}
}
//call our code to build the queries
.buildMediaQuery(@mediaBreak1);
.buildMediaQuery(@mediaBreak2);
.buildMediaQuery(@mediaBreak3);
CSS 输出
@media only screen and (min-width: 800px) {
.myClass1 {
color: #ff0000;
}
section {
width: 760px;
margin: 0 auto;
}
section a {
font-size: 10px;
}
}
@media only screen and (min-width: 1024px) {
.myClass1 {
color: #008000;
}
section {
width: 984px;
margin: 0 auto;
}
section a {
font-size: 12px;
}
}
@media only screen and (min-width: 1280px) {
.myClass1 {
color: #0000ff;
}
section {
width: 1240px;
margin: 0 auto;
}
section a {
font-size: 14px;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)