Question

他们总是说min-width @media规则是首先为移动设备构建的方式，我已经阅读了很多关于它的文章，但我仍然无法理解min-width规则的工作原理＆gt;但是最大宽度很容易，并且易于理解。

 @media only screen and (min-width: 400px) {....some rule here.....}
 @media only screen and(min-width: 900px){......some rule here....}

我的疑问和困惑是：可以在同一个样式表中使用两个断点吗？它首先如何为移动设备做好准备？

我需要一个可以容忍的回答，对于那些喜欢投票的人来说，请不要投票，请耐心等待，并提供足够的帮助。

Answer 1

确实使用min-width真正有助于首先制作网络移动设备。

让我们举个例子。

我们正在创建一个可扩展为两个视口的网络，例如300px，300px +设备。

1）使用min-width

body {
  background: yellow;
}

// 300px+ devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

此background-color设备

已覆盖300px+

2）使用max-width

body {
  background: red;
}

// 300px- devices
@media (max-width: 300px) {
  body {
    background: yellow;
  }
}

此background-color设备

已覆盖300px-

现在，你需要支持600px +设备

3）使用min-width

body {
  background: yellow;
}

// 300px - 600px devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

// 600px+ devices
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

添加了新媒体查询以支持600多种设备，现有样式表无需更改。

4）使用max-width

body {
  background: green;
}

// 600px- devices
@media (max-width: 600px) {
  body {
    background: red;
  }
}

// 300px- devices
    @media (max-width: 300px) {
      body {
        background: yellow;
      }
    }

虽然我们需要额外的media-query规则来支持600多种设备，但我们需要更改全局body background-color以支持新的断点。

现在将 1）与 3）和 2）与 4）进行比较，你会注意到支持新的断点

对于1到3，我们不需要更改现有的样式规则，只需在其上添加新规则。

但修改了2到4个现有规则以支持新断点

<强>摘要

所以min-width确保未来的友好和渐进增强（移动优先）

但是max-width导致短视的方法并且需要降级（移动最后）

min-width媒体查询规则的移动优先方法如何？

1 个答案: