3

Here are links to my CSS files:

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

Here is my link in styles.css (for Web Browsers on PC's)

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

In all other CSS files (targeting Mobile Devices), I do this:

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

However, in all Mobile devices, it goes straight to the last CSS file, styles.css and I get that div 320px on all devices no matter what.

I have only tested on Google's Chrome for Android on mobile devices as well as the stock Android webkit browser (for Android 4.0+). Is my code handling wrong?

4

2 回答 2

4

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

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

于 2012-12-13T20:44:00.547 回答
1

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)" />
于 2012-12-13T20:47:12.023 回答