3

これが私の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に直接移動し、すべてのデバイスでそのdiv320pxを取得します。

私は、モバイルデバイス上のAndroid用GoogleのChromeと、標準のAndroid Webkitブラウザー（Android 4.0以降用）でのみテストしました。私のコード処理は間違っていますか？

4

2 に答える 2

4

おそらく関連するすべてのものをロードし、最後のものが最も一般的であるため（モバイルデバイスはメディア画面と一致します）、前のスタイルシートで定義されたすべてのスタイルを上書きします。CSSは、特異性が同点の場合の最後の勝利です。

一般的なスタイルシートを最初に配置するか、メディアクエリを使用してスタイルシート自体に直接組み合わせてみてください。

于 2012-12-13T20:44:00.547 に答える
1

CSSの特異性は、2つのルールが同じである場合に

.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 に答える