Question

我正在尝试LESS（不是SASS语法的粉丝）并且一直试图找出用它进行媒体查询的最佳方式。

我通过this博客文章阅读了如何使用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
}

我知道这可能存在一些问题，但目前的设置似乎并没有那么有用。

所以我想我的问题是，是否有任何好的解决方案/黑客允许分组媒体查询？

（仅仅是因为我使用无点作为解析我的.less文件的引擎）

Answer 1

首先，您在问题中给出的解决方案肯定对它有一些用处。

然而，我认为有一件事是将所有媒体查询变量彼此“接近”定义会很好（你的解决方案会在每次媒体查询调用下都有它们）。所以我提出以下作为替代解决方案。它也有缺点，可能在前面编写一些代码。

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;
  }
}

Answer 2

对于响应式Wordpress网站，我使用了Eddie Machado（http://themble.com/bones/）称为Bones的入门主题。我更喜欢它使用媒体查询的方式，它有不同的断点（480 +，768 +等）的不同样式表，您可以根据您的设计进行更改。

然后使用@import将这些导入到相应媒体查询下的一个样式表中。你可以在LESS编辑所有这些，我使用Simpless by Kiss（http://wearekiss.com/simpless）自动将我的.less样式表编译成.css。我真的觉得开发一个简单的响应式网站是一个非常好的起点。即使你没有在Wordpress中开发，你也可能想看看他们如何构建他们的媒体查询，因为即使使用LESS，它们似乎都能正常工作。

媒体查询分组而不是匹配的多个分散媒体查询

2 个答案: