2

有人可以向我解释这种响应式方法是如何工作的吗？这是使用 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);
}
4

1 回答 1

2

首先是关于 LESS 框架的快速课程。它基本上是 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 中有很多重复，而且可读性不强（更不用说更改徽标图像的纵横比需要做多少工作）。

在 Less 代码的顶部，您会看到：

.responsive (@scale: 1) {

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

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

现在是它的媒体查询方面。如您所见，.responsive首先声明了 mixin - 所以将此规则集视为“默认”视口规则。

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

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

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

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

于 2012-06-16T03:49:20.497 回答