html - 设备宽度和设备高度在桌面浏览器中是否不能正常工作？

Question

我正在尝试使用我的桌面和浏览器尝试 device-width 和 device-height 以区分该属性在多大程度上起作用以及与 的区别width 当涉及到桌面浏览器时。

出于某种原因，像这样的简单代码对桌面浏览器尤其是 firefox 的响应不是很好。@media screen and (max-device-width: 500px){
body {
背景色:绿色；
}
}
@media screen and (min-device-width: 501px){
body {
背景色:红色；
}
}

然后我尝试调整浏览器的大小，只有第一个声明被应用并变为绿色？

有人知道为什么会这样吗？具体来说，设备宽度和设备特定属性是否仅适用于移动设备而不适用于桌面浏览器？

Answer 1

device-width 是指设备本身的宽度(或设备的屏幕分辨率)，最常用于定位浏览器未调整大小的特定移动设备。 device-width 也可用于定位笔记本电脑，宽度通常为 1200-1600 像素。

width 是指浏览器窗口的宽度(响应调整大小)。

查看此链接以了解常见设备的媒体查询:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

希望这对您有所帮助!