html - 为什么设备宽度在桌面浏览器上工作？

Question

直到今天，我还以为device-width只能在平板电脑和其他移动设备上工作。（或者也许我错了很长时间......）

.test {
    width: 100px;
    height: 100px;
    padding: 5%;
}

@media only screen and (max-width : 1900px) {
    .test { 
        background: blue;
        color: yellow;
    }
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .test { 
        background: #000000; 
        color: #ffffff;
    }
}

<div class="test"> TEST</div>

如果我将显示器分辨率设置为宽度 1024x768，则下面的媒体查询将起作用。

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*...*/
}

device-width由于可以在桌面浏览器中工作，我如何通过媒体查询定位平板电脑和移动设备？

Answer 1

您可以尝试@media handheld代替@media screen.

但您可能需要重新考虑。毕竟，无论是否桌面，如果屏幕尺寸较小，您可能仍希望显示移动布局，因为您的桌面版本可能会针对更高的分辨率进行优化。对此感到恼火的桌面用户应该购买更大的屏幕。;)