为什么设备宽度适用于桌面浏览器?

时间:2014-12-05 07:23:21

标签: html css media-queries device-width

我认为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>
&#13;
&#13;
&#13;

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

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

我如何通过媒体查询定位平板电脑和移动设备,因为device-width可以在桌面浏览器中使用?

1 个答案:

答案 0 :(得分:1)

您可以尝试使用@media handheld代替@media screen

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