使用多个 CSS 文件定位不同的屏幕宽度答案

【问题标题】：Targeting Different Screen Widths with Multiple CSS files使用多个 CSS 文件定位不同的屏幕宽度
【发布时间】：2012-12-01 19:57:46
【问题描述】：

这里是我的 CSS 文件的链接：

        <link  rel="stylesheet" href="css/mobile_css_320.css" media="screen and (min-device-width: 0px) and (max-device-width: 320px)" />
        <link  rel="stylesheet" href="css/mobile_css_480.css" media="screen and (min-device-width: 321px) and (max-device-width: 480px)" />
        <link  rel="stylesheet" href="css/mobile_css_640.css" media="screen and (min-device-width: 481px) and (max-device-width: 640px)" />
        <link  rel="stylesheet" href="css/mobile_css_720.css" media="screen and (min-device-width: 641px) and (max-device-width: 720px)" />
        <link  rel="stylesheet" href="css/styles.css" media="screen, projection" />

这是我在 styles.css 中的链接（用于 PC 上的 Web 浏览器）

#form_wrapper {
      width: 320px;
      margin: 0 auto;
}

在所有其他 CSS 文件（针对移动设备）中，我这样做：

#form_wrapper {
      width: 92%;
      margin: 0 auto;
}

但是，在所有移动设备中，它会直接转到最后一个 CSS 文件 styles.css，无论如何我在所有设备上都会得到 320px 的 div。

我只在移动设备上的 Google 的 Android 版 Chrome 以及现有的 Android webkit 浏览器（适用于 Android 4.0+）上进行了测试。我的代码处理错了吗？

【问题讨论】：

标签： html css mobile media-queries

【解决方案1】：

它可能会加载所有相关的样式，并且由于最后一个是最通用的（移动设备将匹配媒体屏幕），它会覆盖之前样式表中定义的所有样式。在特异性并列的情况下，CSS 是最后的胜利。

尝试将您的通用样式表放在首位，或者直接在样式表中使用媒体查询将它们组合起来。

【讨论】：

原来就是这样。把styles.css先修好了。

【解决方案2】：

CSS 特殊性表明如果两条规则相同，例如

.text { color: blue; }
.text { color: red; }

那么最后一个总是占上风（在这种情况下，任何具有text 类的东西都会有红色文本）

因此，由于您的最后一个样式表没有附加任何媒体查询，因此它始终处于加载状态，并始终覆盖您在其之前的移动样式表中放置的任何样式。

要解决这个问题，您可以：

1) 将桌面样式表放在首位

2) 在最后一个样式表上使用最小宽度媒体查询，例如

<link  rel="stylesheet" href="css/styles.css" media="media="screen and (min-device-width: 720px)" />

【讨论】：