带有LESS Magic的精美媒体查询


81

最好使用更少的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 {

  }
}

希望有人有一个好主意!



基于在评论@zzzzBov谈话,也许我们需要在你的问题一个更加清晰一点什么,你正在努力实现和如何你是想实现它。
ScottS

Answers:


234

这是我在项目中所做的:

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

这样一来,您只需定义一次媒体查询,就可以在较少的文件中使用它。也更容易阅读。:)


2
太棒了,谢谢@Hai!Visual Studio中的一个小问题是,此警告消息是@media在.less文件中使用时生成的:“样式规则中的意外'@'块”。不过,这似乎不是问题。
伊恩·坎贝尔

为什么不能将@mediain插入第1 + 2行中定义的变量?➪遗憾纯@tablet { ...则没有解决,而@media @tablet {...(导致一倍@media当然,如果考虑到的字符串。
弗兰克Nocke

116

我完全同意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放在一起,并使样式更加模块化(与拆分断点方法相比)。


读完这篇文章之后,我发现在编译嵌套的MQ之后,这个Grunt任务可以将MQ分组:github.com/buildingblocks/grunt-combine-media-queries消除 了膨胀。
Jazzy,2014年

这很干净。我可以问一下,为什么〜前面的“只有...吗?”
Anthony_Z 2015年

在LESS中,字符串“”之前的波浪号〜按原样输出字符串,因为在纯LESS中可能是语法错误。
2015年

1
如果您尝试在该“文字字符串”中进行操作怎么办?假设我想使用一个变量来包含屏幕分辨率,例如:我可以做以下事情吗:〜“仅屏幕和(最小宽度:@mySize-20px)”。我知道这行不通,但是这样做的正确方法是什么?
fablexis

44

为Nguyen和Yancey +1,以及另外一个。

如果要明确定义宽度,则可以使用string interpolation和变量作为断点来实现。例如,在使用引导程序时-严格的规则是防止定义重叠。

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

从您所写的内容来看,这个“严格”到底是什么,我无法理解其构造。您有什么资料可以指向我进一步阅读该主题吗?
Kevkong

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

9

您还可以像这样组合媒体查询

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

7

我们使用如下设置:

@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编译器,否则此方法可能不会编译。


4

我正在使用这些mixin和变量

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

0
@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)";

0

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

    @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;
      }
    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.