Question

我在less 4框架中安装了css默认值。它们提供基于“浏览器大小”更改主体声明的媒体查询。我添加了声明以更改正文背景颜色，以便在我在桌面上扩展我的谷歌浏览器浏览器时，我可以看到正在进行的媒体查询。

默认桌面颜色为白色。然后我有平板电脑布局和移动布局：

  /*        Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
 -----------------------------------------------------------------
  cols    1     2      3      4      5      6      7      8 
  px      68    160    252    344    436    528    620    712    */

 @media only screen and (min-width: 768px) and (max-width: 991px) {

body {
    width: 712px;
    padding: 10px 20px 60px;
    background-color:yellow;
}
}
/*      Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
 ---------------------------------------------
       cols    1     2      3 
       px      68    160    252    */

@media only screen and (max-width: 767px) {

body {
    width: 252px;
    padding: 10px 20px 60px;
    background-color:pink;
}

}

当我调整桌面浏览器的大小时，它会改变颜色。但是当我在我的HTC轰动android浏览器中打开页面时，它是黄色的。很明显，媒体查询并没有为我的浏览器的“大小”而烦恼。我还读到有一种叫做视口的东西，它可能是在我的手机中缩放页面，使得浏览器分辨率不符合媒体查询阈值。如何解决这个问题，以便为我的手机启用正确的媒体查询？

Answer 1

使用device-width作为iOS和Android的默认设置，然后使用仅适用于iOS的方向扩展媒体查询

媒体查询和css LESS FRAMEWORK 4

1 个答案: