私はウェブサイトを作成しており、モバイルとデスクトップの両方のスタイルで外部CSSファイルを使用してメディアクエリを作成しました。下のHTMLは外部のシートにリンクしています。 mobile.cssはデバイスで使用されます< 767px、desktop.cssはデバイス> 768pxで使用されます。メディアクエリ:3つの外部CSSファイル
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/desktop.css" />
</head>
がサイトを設計した、私は、これは、より応答することができますし、tablet.cssと1000pxの上にデバイス用の新しいdesktop.cssを作成するdesktop.cssを変更したいと考えています。上記正しく正しく動作mobile.cssとtablet.cssを生成
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/tablet.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" /> <!-- Doesn't work -->
</head>
をしかし、それはデスクトップを適用するのではなく、1000pxの上に行くとき、それはちょうどtablet.cssを保持:メディアクエリで外部CSS下記のリンクはいえ動作しません。 .css。
私の質問は、1000px以上のデバイス用に3番目のCSSファイルを追加することですか?
ご協力いただきますようお願い申し上げます。
おかげで、
フィルポット