媒体查询和CSS较少框架4

我已经在较少的4框架中安装了CSS默认值。它们提供基于“浏览器大小”更改主体声明的媒体查询。我添加了声明来更改正文背景颜色，以便我可以查看哪些媒体查询正在踢入，因为我在桌面上缩放了我的Chrome浏览器。媒体查询和CSS较少框架4

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

/*  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浏览器中打开页面时，它是黄色的。很显然，媒体查询并没有为我的浏览器的“大小”踢脚。我还读到，有一些称为视口，这可能是在我的手机扩大网页，使浏览器的分辨率不符合媒体查询阈值。我该如何解决这个问题，以便正确的媒体查询为我的手机启动？

来源

2011-10-14 Homan

使用设备宽度为默认iOS和Android然后用方向延伸媒体查询仅适用于iOS

来源

2011-10-15 00:10:28 albert

对不起，我是小白，我真的不明白你的意思。你能给个例子吗？这可以用CSS声明来完成吗？ – Homan

需要添加到我的html头部分，就在包含更少的框架之后。现在它可以工作。 – Homan

查看端口ftw！我浪费了一个小时，认为这是我的CSS – Strawberry

媒体查询和CSS较少框架4

回答

相关问题