CSS - モバイル用に設計するときは、@ mediaクエリを1つだけ使用するだけで安全ですか？

Question

私はモバイルデバイスで動作するはずのWebサイトを作っています。私はテーマについて研究していると、すべてのウェブサイトは、私は、たとえば、上で動作するWebサイトを意図し、デバイスごとに異なるメディアクエリを使用することをお勧めします。私はそれだけで使用するはるかに簡単だろうと感じしかし

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) {  
} 

/* etc... */ 

ランドスケープのメディアクエリーとポートレートのオリエンテーションのメディアクエリーがありますが、それを推薦する人はいません。

あなたはタブレットに特化したものをデザインしたいと思うかもしれません。しかし、携帯電話について言えば、CRAZY固有のものが必要な場合は、それぞれのデバイスに対して異なるメディアクエリーを持つ理由があります。

何か理由がありますか？ デバイスごとにメディアクエリを追加するか、2つのメディアクエリだけを続行するのは安全ですか？

Answer 1

1つまたは2つのメディアクエリで完全に削除できます。私は、すべてのデバイスで動作する完全に応答性の高いサイトでは、タブレット用に、その後はモバイル用に常にそれを行います。これらのタイプのメディアクエリは、開発者がこのサイズとそのサイズのサイトのセットバージョンを取得したいときに非常に特定のサイズのものです。

@media screen and (max-width: 1024px) { 
    /* Landscape style changes */ 
} 

@media screen and (max-width: 768px) { 
    /* Portrait to mobile style changes */ 
} 

@media screen and (max-width: 450px) { 
    /* Maybe one more because that header text doesn't fit anymore on smaller screen */ 
} 

これはコードの残りの部分でも有効ですが、クリーンなCSSがある場合は問題ありません。

Answer 2

これは大丈夫です。すべてのページに応答metaタグを追加することを忘れないでください：あなたはプレビューウィンドウの幅と高さのサイズを変更するよう

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

、その後は、メディアクエリを使用します。それはウェブサイトをデスクトップ版と同じにします。