我在 LESS 中的媒体查询在桌面上运行良好，但在测试 iPad2 或 Samsung Galaxy 4 手机时却不行，它似乎是 device-pixel-ratio 那是在丢东西。我将 min-device-pixel-ratio 降低到 1.5。那也没用。出于某种原因，尽管三星的分辨率为 640x320 而 iPad 的分辨率为 1024x768，但三星和 iPad 都遇到了相同的查询。知道如何更好地分解这些媒体查询吗？
更少的代码:
@screenXS:~"screen and (max-width:479px)";
@screenS:~"screen and (min-width: 480px) and (max-width:639px)";
@screenM:~"screen and (min-width: 640px) and (max-width:767px)";
@screenL:~"screen and (min-width: 768px) and (max-width:1023px)";
@screenXL:~"screen and (min-width: 1024px)";
@dpr:~"(-webkit-min-device-pixel-ratio:2) and (min-device-pixel-ratio:2)";
.myElement {
@media @screenXS {
font-size: 10px;
line-height: 18px;
@media @dpr {
color:#f00 !important;
font-size:20px;
}
}
@media @screenS {
font-size: 11px;
line-height: 20px;
@media @dpr {
color:#0f0 !important;
font-size:30px;
}
}
@media @screenM, @screenL {
font-size: 12px;
line-height: 21px;
@media @dpr {
color:#00f !important;
font-size:50px;
}
}
@media @screenXL {
font-size: 14px;
line-height: 25px;
@media @dpr {
color:#ff0 !important;
font-size:100px;
}
}
}
最佳答案
尝试这样的事情:)
<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)">
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)">
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)">
这只是一个例子!
关于css - 设备像素比的媒体查询不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25811034/