Question

以下是我的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，无论如何，我都会在所有设备上获得div 320px。

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

Answer 1

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

首先尝试使用通用样式表，或者直接在样式表本身中使用媒体查询将它们组合在一起。

Answer 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)" />

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

2 个答案: