带有一些 LESS 魔法的花式媒体查询

Posted 2023-03-06

【中文标题】带有一些 LESS 魔法的花式媒体查询

【英文标题】：Fancy Media Queries with some LESS Magic

【发布时间】：2013-03-28 02:20:29

【问题描述】：

如果使用 less 在一些 css 类中包装不同分辨率的 css 样式会很好。

我想做这样的事情：

footer 
  width: 100%;


.tablet 
  footer 
    width: 768px;
  


.desktop 
  footer 
    width: 940px;
  

最后应该是这样的结果：

footer 
  width: 100%;


@media screen and (min-width: 768px) 
  footer 
    width: 768px;
  


@media screen and (min-width: 992px) 
  footer 
    width: 940px;
  

.tablet 可能看起来像这样：

@media screen and (min-width: 768px) 
  .tablet 

  

希望有人有一个好主意！

【问题讨论】：

Media Query grouping instead of multiple scattered media queries that match 的可能重复项

根据与 @zzzzBov 的 cmets 中的对话，也许我们需要更清楚您的问题是关于 what 您想要实现的目标以及 如何 i> 你想要实现它。

【参考方案1】：

这就是我在项目中使用的：

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile 
      .banner
        width: auto;
      
    

    @media @tablet 
      .banner
        width: 720px;
      
    

  @media @ipad 
      .banner
        width: 920px;
      
    

【参考方案2】：

@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

【参考方案3】：

Nguyen 和 Yancey +1 - 再加上一个。

如果您想要显式定义宽度，您可以使用string interpolation 和断点变量来实现。这里以 bootstrap 为例 - 严格的规则是为了防止定义重叠。

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @screen-xs-min)";
@phone-strict:      ~"only screen and (min-width: @screen-xs-min) and (max-width: @screen-xs-max)";
@tablet:            ~"only screen and (min-width: @screen-sm-min)";
@tablet-strict:     ~"only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max)";
@desktop:           ~"only screen and (min-width: @screen-md-min)";
@desktop-strict:    ~"only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max)";
@large:             ~"only screen and (min-width: @screen-lg-min)";

footer
    width: 100%;
    @media @tablet 
        width: 768px;
    
    @media @desktop 
        width: 940px;
    

【讨论】：

这个“-strict”到底是什么，从你写的内容来看，我无法理解这个结构。你有什么资料可以指点我进一步阅读这个主题吗？

实际上，“严格查询”是为了方便起见，仅当您希望您的 CSS 专门应用于单个屏幕范围时才应使用。当首先使用移动设备时（例如：zellwk.com/blog/how-to-write-mobile-first-css），我会说，它们的使用可能有点设计味道，我通常会尽量避免使用它们。但根据具体情况，您可能希望某些（重）CSS 专门针对，例如 @tablet，并且您不想覆盖它，例如 @desktop 和/或 @large。在这些情况下，您可以使用严格查询（此处为 @tablet-strict）。

【参考方案4】：

我们使用这样的设置：

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules)  @media screen and (min-width:@vp_desktop) @rules();  ;
.OnTablet(@rules)  @media screen and (max-width:@vp_tablet) @rules();  ;
.OnMobile(@rules)  @media screen and (max-width:@vp_mobile) @rules();  ;

您只需要设置变量，其余的由 mixin 处理，因此它很容易维护，但仍然很灵活：

div 
  display: inline-block;
  .OnTablet(
    display: block;
  );

值得一提的是，虽然这种技术非常简单，但如果使用不当，您的 CSS 输出将充满媒体查询。我尝试将媒体查询限制为每个断点、每个文件 1 个。文件在哪里是 header.less 或 search.less。

注意除非您使用 javascript 编译器，否则此方法可能无法编译。

【参考方案5】：

我正在使用这些 mixins 和变量

.max(@max; @rules)@media only screen and (max-width: (@max - 1))@rules();
.min(@min; @rules)@media only screen and (min-width: @min)@rules();
.bw(@min; @max; @rules)@media only screen and (min-width: @min) and (max-width: (@max - 1))@rules();

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

所以这个

footer
    width: 100%;
    .bw(@tab,@desktop,
        width: 768px;
    );
    .min(@desktop,
        width: 940px;
    );

变成

footer 
  width: 100%;

@media only screen and (min-width: 800px) and (max-width: 991px) 
  footer 
    width: 768px;
  

@media only screen and (min-width: 992px) 
  footer 
    width: 940px;
  

【参考方案6】：

你也可以像这样组合媒体查询

@media @desktop, @tablet, @ipad 

//common styles... 

【参考方案7】：

我完全同意 Hai Nguyen 的回答（已被接受），但您可以通过执行以下操作进一步清理它：

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer
  width: 100%;
  @media @tablet 
    width: 768px;
  
  @media @desktop 
    width: 940px;
  

它本质上是一样的，但可以让您将媒体查询嵌套在原始选择器中。它将特定元素的所有 CSS 保存在一起，并使您的样式更加模块化（与拆分断点方法相比）。

【讨论】：

读完后，我发现这个 Grunt 任务在嵌套 MQ 编译后对 MQ 进行分组：github.com/buildingblocks/grunt-combine-media-queries 消除膨胀。

这很好，很干净。请问，为什么“only...”前面的~？

在 LESS 中，字符串 "" 字面量之前的波浪号 ~ 按原样输出字符串，因为它可能是纯 LESS 中的语法错误。

如果您尝试在“文字字符串”内部进行操作怎么办？假设我想使用一个变量来包含屏幕分辨率，例如：我可以做类似的事情：~"only screen and (min-width: @mySize - 20px)"。我知道它不起作用，但是这样做的正确方法是什么？

【参考方案8】：

这是我在项目中所做的：

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop 
  footer 
    width: 940px;
  


@media @tablet 
  footer 
    width: 768px;
  

这允许您只定义一次媒体查询，并且可以在您的 less 文件中使用它。也更容易阅读。 :)

【讨论】：

这太棒了，谢谢@Hai！ Visual Studio 中的一个小问题是，在 .less 文件中使用 @media 时会生成此警告消息：“样式规则中出现意外的 '@' 块”。不过，这似乎不是问题。

为什么我不能将@media 拉到第 1+2 行定义的变量中？ ➪ 遗憾的是，纯 @tablet ... 无法解析，而 @media @tablet ...（如果带入字符串，当然会导致两倍的 @media。