html - 我应该使用什么(最小设备宽度)和(最小宽度)？

Question

我正在 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 .老实说，我从答案中得到了一些东西，但仍然不知道为什么我桌面上的浏览器在我调整窗口大小时拒绝应用样式。

Answer 1

你可以使用

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

对于任何大小