我应该使用什么（最小设备宽度）和（最小宽度）？答案

【问题标题】：what should I use (min-device-width) and (min-width)?我应该使用什么（最小设备宽度）和（最小宽度）？
【发布时间】：2017-03-12 08:20:48
【问题描述】：

我正在对 RWD（响应式网页设计）进行一些测试，并正在寻找最常见的断点。我遇到了这个：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background-color: #7763a5; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body {
background-color: #011C40; }
}

@media only screen  and (min-width : 1224px) {
body {
background-color: #3957FC; }
}

我尝试调整浏览器窗口的大小（使用 Chrome），发现除了带有(min-width : 1224px) 属性的样式之外，没有其他样式生效。

为什么会发生这种情况？我应该如何测试便携式设备的样式？另外，这样写其他设备的条件语句可以吗？

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

因为最后一个针对桌面的内容只是在没有其他语句中提到的“设备”部分的情况下编写的。

我查看了这个问题difference between max-width and max-device-width。公平地说，我从答案中得到了一些东西，但仍然不知道为什么我桌面上的浏览器在调整窗口大小时拒绝应用样式。

【问题讨论】：

如果你使用max-device-width，当你改变桌面上浏览器窗口的大小时，CSS不会改变，因为你的桌面不会改变大小。如果您使用 max-width，当您更改桌面上浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单等。

标签： html css responsive-design

【解决方案1】：

你可以使用

@media (max-width: px) {}
@media (min-width: px) {}

适用于任何尺寸

【讨论】：