我遇到媒体查询无法加载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
答案 0 :(得分：0)
就像iphone混合了媒体查询内外的元素。
嗯，是的，这就是它的工作原理。将使用媒体查询之外的内容，除非内部媒体查询中的内容直接覆盖它。您不应该将所有代码都插入到媒体查询中，只需要根据该分辨率调整所需的内容。
媒体查询不会替换您的主CSS文件，而是补充它。