html - css @media 显示问题，需要澄清

Question

好吧，不久前我在一个小网站上工作，接到了它的移动友好版本的电话，所以我采用了主要的 html/css，制作了副本，这样我就可以工作并且不怕搞砸任何东西，然后在完成后将原始链接链接到新的移动 CSS。

现在我粗略地做了这个，我现在只在主要的移动页面/索引上工作，我想出了......好吧，让我告诉你。

这是通过复制/粘贴在当前实际站点上的相同 html，但仅附加了移动 css(以快速测试)。它应该是这样的:http://somdowprod.net/4testing/indexMOBILESAMPLE没什么特别的。

现在 THIS 与上面的链接相同，通过媒体查询购买了相同的内容: http://somdowprod.net/4testing/index2

在第二个链接上，如果您将浏览器的大小调整为接近小于 400 宽度的任何位置，您会看到它像预期的那样向下移动，但它是扭曲的。此外，在 iPhone 上查看时，您会看到同样的困惑情况。

我在顶部和底部所做的不同之处在于，我在底部添加了

<link href="2882maincssHTML5.css" rel="stylesheet" type="text/css" media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  /> 

我在 css 上添加了相同的内容:

编辑:在 css 上复制了错误的代码

 @media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

有什么想法吗？我迷路了，如果它在第一个原始版本上不起作用，我能理解，但是......是的。

Answer 1

如果您从 2882maincssHTML5.css 中删除这段代码，它将起作用:

@media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

您已经链接了样式表:

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  />

但是您可以重写以删除 type(在 HTML5 中不需要)和 min-width，因为它们是不必要的。

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)"  />