Question

我在 LESS 中的媒体查询在桌面上工作正常，但在测试iPad2或三星Galaxy 4手机时却没有，而且device-pixel-ratio似乎正在抛弃它。我将min-device-pixel-ratio降低到了1.5。那也行不通。出于某种原因，尽管三星640x320分辨率和iPad的1024x768分辨率，三星和iPad都达成了相同的查询。知道如何更好地打破这些媒体查询吗？

LESS代码：

@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;
          }
     }
 }

Answer 1

尝试这样的事情：）

<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)">

它只是一个例子！

媒体查询设备像素比率无法正常工作

1 个答案: