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

Posted

技术标签:

【中文标题】媒体查询分组而不是匹配的多个分散的媒体查询【英文标题】:Media Query grouping instead of multiple scattered media queries that match 【发布时间】:2012-11-10 07:55:04 【问题描述】:

我正在尝试 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

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

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

(以防万一我使用 dotless 作为引擎来解析我的 .less 文件)

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

我还要补充一点,Simpless 实际上可以跟踪@imports,所以即使您正在编辑导入到 base.less 中的 768.less,它仍然会将 base.less 编译到 base.css当您节省 768.less 时。很棒的东西。 有趣的尝试。我真的不喜欢单独的 LESS 文件的想法(知道在运行时它将是一个),但这可能是一种选择。 FYI Dotless 是一个 .NET LESS 编译器,它返回的 cssified 更少,并且由于 web.config 可以返回缩小或漂亮的 css。 有趣。这是我忘记提到的关于 Simpless 实际上的东西,它也可以缩小和前缀 css。【参考方案2】:

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

不过,我认为,最好将所有媒体查询变量定义为彼此“靠近”(您的解决方案将在每个媒体查询调用下都有它们)。所以我建议以下作为替代解决方案。它也有缺点,一个可能是前面的编码更多。

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;
  

【讨论】:

我提出这些建议的原因是因为 LESS 使用具有给定名称的最局部变量...您可以预见只需覆盖更改的变量。如果图像宽度发生了全部变化...覆盖该 var 并保持其他值不变。 @Jared--是的,我相信你也可以用我的解决方案做到这一点。更多的是您是否想在代码中查看媒体查询的所有各种变量(如我的解决方案),或者如果您想在它们的@media 定义下单独查看它们(如您的代码) .两者都将在最终的 CSS 中一起生成它们,但每个都对后端代码使用不同的方法。我不确定哪个更好,只是不同,这取决于程序员的愿望和应用程序。

以上是关于媒体查询分组而不是匹配的多个分散的媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

媒体查询用法及常见媒体尺寸

CSS媒体查询总结

关于屏幕尺寸而不是分辨率的媒体查询

媒体查询邮件

使用媒体查询进行移动优化的背景而不是内联图像?

使用视口进行响应而不是媒体查询