我正在尝试LESS(不是SASS语法的粉丝)并且一直试图找出用它进行媒体查询的最佳方法.
我通过this博文阅读了如何用LESS“做”媒体查询,但它指出了这导致所有媒体查询被分离并分散在整个CSS中的事实.这并没有真正打扰我(我可以不关心结果,更多关心它的工作).困扰我的是一条评论,该评论在从iOS设备查看时讨论了问题,而评论者发现,一旦整合了媒体查询,问题就解决了.
我开始这种工作的方式就像……
//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 }
我知道这可能存在一些问题,但目前的设置似乎并没有那么有用.
所以我想我的问题是,是否有任何好的解决方案/黑客允许分组媒体查询?
(只是因为我使用无点作为解析我的.less文件的引擎)
解决方法
首先,您在问题中给出的解决方案肯定对它有一些用处.
然而,我认为有一件事是将所有媒体查询变量定义为“接近”彼此很好(你的解决方案会在每次媒体查询调用下都有它们).所以我提出以下作为替代解决方案.它也有缺点,一个可能在前面编码更多.
少量代码
//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; } }