css - 使用不同的媒体查询方法的响应式布局行为

Question

有人可以向我解释一下这种响应式方法是如何工作的吗？这是使用 LESS 框架完成的。作者如何实现所需的设备特定行为？

.responsive (@scale: 1) {

/*Responsive code goes here for example*/
.logo {
        padding: 44px * @scale 0 33px * @scale;

        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

.responsive;

@media screen and (min-width: 480px) and (max-width: 639px) {
    .responsive(0.75);
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .responsive(0.5);
}

@media screen and (max-width: 319px) {
    .responsive(0.25);
}

Answer 1

首先是有关 LESS 框架的快速类(class)。它基本上是一个 CSS 预处理器，它使用编码概念使 CSS 编写起来更加容易和可读。

Less 样式表转换为 CSS，如下所示:

.logo {
  padding: 44px 0 33px;
}
.logo img {
  width: 580px;
  height: 90px;
}
@media screen and (min-width: 480px) and (max-width: 639px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 33px 0 24.75px;
  }
  .logo img {
    width: 435px;
    height: 67.5px;
  }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 22px 0 16.5px;
  }
  .logo img {
    width: 290px;
    height: 45px;
  }
}
@media screen and (max-width: 319px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 11px 0 8.25px;
  }
  .logo img {
    width: 145px;
    height: 22.5px;
  }
}

正如您所看到的，CSS 中有很多重复，并且可读性不太好(更不用说更改 Logo 图像的宽高比需要做多少工作了)。

在 Less 代码的顶部，您会看到以下内容:

.responsive (@scale: 1) {

    /*Responsive code goes here for example*/
    .logo {
        padding: 44px * @scale 0 33px * @scale;
        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

上面的代码被称为“参数混合”，将它们视为面向对象语言中的类。你可以在这些“mixins”中传入变量、设置变量和规则。在本例中，@scale 是参数，默认值 1 被传入。您几乎可以在 mixin 中设置规则，除了您可以做的一件很酷的事情LESS 是声明“嵌套”规则(这就是您在 .logo 选择器内使用 img 选择器看到的内容。这本质上与 .logo img{/*rules*/} - 这是生成的 CSS 的内容。有关 LESS 的完整文档，请参阅此站点:http://lesscss.org/

现在是媒体查询方面。正如您所看到的，.responsive mixin 首先被声明 - 所以将此规则集视为“默认”视口(viewport)规则。

第一个媒体查询@media screen and (min-width: 480px) and (max-width: 639px) 声明对于浏览器宽度大于 480px 且小于 639px 的所有视口(viewport)，应用指定的任何规则 - 在本例中 .responsive(0.75); (因此以 0.75 作为参数重新调整 mixin 中的尺寸)。因此，当满足此参数时，CSS 的级联方面将使用媒体查询内的规则覆盖预先设置的默认规则。

相同的概念适用于其他媒体查询。只需将 min-width 和 max-width 视为断点 setter 即可。无论您在哪里看到定义的最小宽度，规则都将应用于大于或至少定义的断点的所有视口(viewport)。同样，最大宽度规则适用于小于指定断点的所有视口(viewport)。您可以在媒体查询中结合使用 min-width 和 max-width 来获取一系列视口(viewport)来应用规则。

有关更多信息，我建议查看这篇文章 http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

它对响应式设计以及媒体查询如何发挥作用以及设计响应式网页进行了精彩的解释。