有一些不太魔术花式媒体查询(Fancy Media Queries with some LESS M

这将是很好的包裹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 {

  }
}

希望有人有一个不错的主意！

Answer 1:

以下是我在我的项目已经完成：

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

这允许你只有一次定义媒体查询，你可以用它在你的减档。 也有点更容易阅读。 :)

Answer 2:

我完全海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特定元素一起，让您的风格更加模块化（VS分割断点的方法）。

Answer 3:

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

Answer 4:

而且你还可以结合媒体查询这样的

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Answer 5:

我使用这些混合类型和变量

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

Answer 6:

我们用这样的设置：

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

你只需要设置变量，则混入处理剩下所以很容易维护，但仍然灵活：

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

值得一提的是，虽然这种技术是很容易的，如果用不好你的CSS输出将以饱满的媒体查询。 我尝试向媒体查询限制为1元断点，每个文件。 其中一个文件将是header.less或search.less。

注意此方法可能，除非您使用的是JavaScript编译器将不会编译。

Answer 7:

    And this is what i have use for my project


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

文章来源: Fancy Media Queries with some LESS Magic