すべてのデバイスのメディアクエリ

Question

すべてのデバイスに対して異なるメディアクエリを設定する以外に、私のウェブサイトをさまざまなモバイルデバイスで良好に見えるようにする簡単な方法はありますか？

Answer 1

あなたは、ウェブサイトが応答するためにメディアクエリを使用することができますが、同様にあなたがここなど、ラップトップ、タブレット、ミニ電話などの他のデバイスのルックスであることができ、あなたはiPad用

/* ----------- iPad mini ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 1 and 2 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 3 and 4 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

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

} 

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

} 

などの様々な画面を調整する必要がありますメディア画面のすべての画面のサイズを指定した記事https://css-tricks.com/snippets/css/media-queries-for-standard-devices/。もう一度書き直す必要はありません。

メディアクエリ以外にも、ブートストラップのようなフレームワークを使用することができます。これは、メディアクエリを使用する頭痛を軽減します。代わりに、定義済みのCSSを持つクラスを使用できます。

Answer 2

ちょうど幅でできますか？

@media screen and (max-width: 480px) { 
    // CSS Here 
} 

Answer 3

あなたは通常、1200、992、768、多分480のメディアクエリを使用します。あなたのウェブサイトが完全に応答したい場合は、それほど多くはありません。また、ブートストラップを学習して使用することで、応答性を高めることができます。