2017-09-03 12 views
1

私はウェブサイトを作成しており、モバイルとデスクトップの両方のスタイルで外部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ファイルを追加することですか?

ご協力いただきますようお願い申し上げます。

おかげで、

フィルポット

答えて

0

ダニエルWiecekからの回答に感謝しますそれは正しい方向に私を指摘し、私はそれを考え出した。モバイル、タブレット、デスクトップ用に3つのCSS外部ファイルを用意するには、次のHTMLが機能しました。

<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) and (max-width: 999px)" href="css/tablet.css" /> 
    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" /> 
</head> 
1

が正確に方法を知っているが、これはどうしないでください:

<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 999px)" href="css/tablet.css" /> 

または

<link rel="stylesheet" media="screen and (min-width: 768px,max-width: 999px)" href="css/tablet.css" />