0

相当新手的问题，我目前正在使用Any Clarke 的 320andup 模板来制作响应式网站。

一切进展顺利，除了浏览器在查看736px媒体查询及以上的检查元素时似乎没有被浏览器拾取的相当多的 CSS 规则，它仍然只是从基本级别（320 移动) 和/或480和600 像素的指定宽度。

在 Firefox 中没有问题，只有在 chrome 中。（chrome中看似被忽略的属性在下面评论）我还不敢检查IE，有人对此有任何答案/大修复吗？

例如，

base level (320px)
.content { clear: both;margin: 10px auto;width: 92%;}     
ul.social li{text-align:right;list-style:none;}


@media only screen and (min-width: 480px) {

ul.social li{text-align:right;list-style:none;}

.content {clear: both;margin: 100px auto;width: 92%;}

}

@media only screen and (min-width: 992px) {

ul.social li{ text-align:right; list-style:none; /*this ignored --> */display:inline;}

.content{ clear:both; /*this ignored --> */ margin-left:200px;}

}

有关详细信息，请在此处找到核心 320andup 文件：https ://github.com/malarkey/320andup/blob/master/css/320andup.css

4

1 回答 1

0

这一行：

@media only screen and (min-width: 992px)

意味着在启动代码之前，屏幕的最小宽度需要为 992px。所以 736px 没有显示这些的事实并不让我感到惊讶（如果 FF 正在显示它，我会感到惊讶，正如你所暗示的那样）。这是因为在浏览器窗口宽度为 992 像素（736 像素太窄）之前，它不应使用这些样式。见例子。

如果您希望他们更早参与，请更改号码（类似）：

@media only screen and (min-width: 730px)
于 2012-05-02T13:31:58.267 回答