0

我遇到了媒体查询没有加载 CSS 或正确显示样式的问题。

我所做的是为我的 iPhone 创建一个 style480.css,为正常创建一个 style.css。

我加载了

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

在我的网站上,以便它可以工作。

我将主站点上的 css 设置为读取样式 480,这样我就可以为 iphone 进行样式化。在我的 iphone 上一切看起来都很棒,当然这只是我桌面上的一个无聊的列表。

完成 style480 后,我将 css 复制/粘贴到

@media only screen and (max-width: 480px) {
{ 
    body {width:100%;}
} 

以我的风格 CSS。

听起来很标准。

但是它在我的 iPhone 上的格式不正确

顶部导航菜单(我使用 html 5 <nav>)被推到左边,一些列表不应该被浮动。

就像 iphone 正在混合来自媒体查询内外的元素。

我什至尝试将媒体查询放在顶部,放在底部并加载

-webkit-min-device-pixel-ratio : 1.  

同样的事情,就像它正在混合css。

我什至尝试在 HTML 上单独加载 css 文件......完全相同。

我可以让我的 iphone css 正确加载的唯一方法是将其设置为页面的主 css。当我加载 2 组 css 时,它无法在 iphone 上运行(但它可以在我的笔记本电脑上运行)

如果我能找到一种从 iphone 查看 css 的方法,我也许能够弄清楚它在做什么,但在他们之前,我不知道为什么它没有正确加载 CSS

4

1 回答 1

0

就像 iphone 正在混合来自媒体查询内外的元素。

嗯,是的,它就是这样工作的。将使用媒体查询之外的内容,除非媒体查询的内容直接覆盖它。您不应该将所有代码都粘贴到媒体查询中,而应该将您想要针对该分辨率进行调整的内容粘贴到媒体查询中。

媒体查询不会替换您的主 CSS 文件,而是对其进行补充。

于 2012-04-14T20:11:03.543 回答