我认为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;
如果我将显示器分辨率设置为宽度1024x768,则下面的媒体查询将起作用。
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*...*/
}
我如何通过媒体查询定位平板电脑和移动设备,因为device-width
可以在桌面浏览器中使用?
答案 0 :(得分:1)
您可以尝试使用@media handheld
代替@media screen
。
但你可能想重新考虑一下。毕竟,桌面与否,如果屏幕尺寸较小,您可能仍希望显示移动布局,因为您的桌面版本可能会针对更高分辨率进行优化。对此感到恼火的桌面用户应该购买更大的屏幕。 ;)