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

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

---

首先是关于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;
        }
    }
}

上面的代码被称为“参数混合”，可以将其视为面向对象语言中的类。您可以在这些“混合”中传入变量、设置变量和规则。在这种情况下，

@scale

是参数，并传入默认值

1

。你几乎可以在mixin中设置规则，除了一件很酷的事情，你可以用更少的东西来做，那就是声明“嵌套”规则（这就是你在

.logo

选择器中看到的

img

选择器。这与

.logo img{/*rules*/}基本相同

-这就是生成的CSS的内容。有关以下内容的完整文档，请参阅本网站：

现在是它的媒体查询方面。正如您所看到的，

.responsive

mixin是首先声明的-因此将此规则集视为“默认”视口规则

第一个媒体查询

@media screen and（最小宽度：480px）和（最大宽度：639px）

说明，对于浏览器宽度大于480px且小于639px的所有视口，应用指定的任何规则-在本例中为

.responsive（0.75）；

（因此使用0.75作为参数重新缩放mixin中的尺寸）因此，当满足此参数时，CSS的级联方面将使用媒体查询中的规则覆盖预先设置的默认规则

同样的概念也适用于其他媒体查询。只需将“最小宽度”和“最大宽度”视为断点设置器。无论您在哪里看到定义的“最小宽度”，规则都将应用于大于或至少大于该定义断点的所有视口。同样，“最大宽度”规则也适用于小于规范的所有视口您可以在媒体查询中组合最小宽度和最大宽度，以获得要应用规则的视口范围

有关更多信息，我建议阅读本文

---

它很好地解释了响应性设计，以及媒体查询如何发挥作用，并设计了响应性网页。

将“@scale”替换为数字1，则img宽度为580。将“@scale”替换为.5，则img宽度为290。所有“@media”查询将“@scale”替换为各自的值（0.75、0.5、0.25）取决于查询结果。这就是它的响应方式。