CSSのメディアクエリが乱雑になる

Question

これは深刻な問題ではありませんが、私はCSSのメディアクエリでより多くの情報を共有したいと思っています。

私自身のCSSメディアクエリは非常に快適ですが、まだそれには多すぎる欠陥があります。今日のモバイルデバイスが急速に成長していることを知っているように、その中にはタブレットやノートパソコンの解像度も同じものがあります。

main.cssがdekstopのためである、のは、これは私はそれが少ないタイプにするために、ブートストラップを使用してindex.phpを

<!-- Bootstrap --> 
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css"> 
    <!-- custom --> 
    <link rel="stylesheet" type="text/css" href="style/css/main.css"> 
    <link rel="stylesheet" type="text/css" href="style/css/laptop.css"> 
    <link rel="stylesheet" type="text/css" href="style/css/mobile.css"> 

1. の私のメディアクエリの私のオーダーである場合に

   を取得してみましょう私のデスクトップの解像度で実際に最高のビューである1920x1080pとそれ以下は完全ではありません。

2. mobile.cssは携帯電話やタブレットのようなデバイス用ですが、デフォルトのモバイルデバイスとipadの解像度でこれを取得しています。アンドロイドの解像度が粗くて不明であるため、アンドロイド解像度がちょっと混乱してしまいます768pxから離れてしまいます。

3. laptop.cssは、ノートパソコンの表示用であり、時にはうまく動作しないと思います。

   これは、各メディアのCSSコード main.cssでは、 mobile.css plainですこれは私がこれを持ってlinkある

   /*default*/ 
   @media screen and (max-width: 768px) { 
       its like button, font, etc. 
   } 
   
   
   /*default Portrait*/ 
   @media screen and (max-width: 768px) and (orientation: portrait) { 
   actually its working good on both kind of device IOS and Android. 
   } 
   
   
   /* iPad Portrait */ 
   @media only screen 
       and (min-device-width: 768px) 
       and (max-device-width: 1024px) 
       and (orientation: portrait) 
       and (-webkit-min-device-pixel-ratio: 1) { 
   } 
   
   
   /* iPad Landscape */ 
   @media only screen 
       and (min-device-width: 768px) 
       and (max-device-width: 1024px) 
       and (orientation: landscape) 
       and (-webkit-min-device-pixel-ratio: 1) { 
   } 
   
   
   /*default Landscape*/ 
   @media screen and (max-width: 768px) and (orientation: landscape) { 
       this one it's a little bit tricky because some of the phone device is now has length with laptop resolution. 
   } 
   

   とlaptop.css

   @media screen 
       and (min-device-width: 1024px) 
       and (max-device-width: 1280px) 
       and (-webkit-min-device-pixel-ratio: 1) { 
   i got this for an old laptop, like square laptop will do too. 
       } 
   
   /* ----------- Non-Retina Screens ----------- */ 
   @media screen 
       and (min-device-width: 1200px) 
       and (max-device-width: 1600px) 
       and (-webkit-min-device-pixel-ratio: 1) { 
       } 
   
   /* ----------- Retina Screens ----------- */ 
   @media screen 
       and (min-device-width: 1200px) 
       and (max-device-width: 1600px) 
       and (-webkit-min-device-pixel-ratio: 2) 
       and (min-resolution: 192dpi) { 
       } 
   

のようなものですメディアクエリ、私が選んだすべてではありません。私は自分のメディアクエリーをいくつか追加しています。

これらの中で最も素晴らしいのは絶対位置であり、下記のimgのような2ダイブから飛ぶものです。ここではまだ良く見えますが、完璧ではありませんが、デバイスが私の解決媒体の質問から外れていれば、それは台無しになるでしょう。

ので、ウェブ開発者として、あなたのメディアクエリは何ですか？ここでいくつかの答えとインスピレーションを落とすことができますように。

Answer 1

メディアクエリに複数のファイルを使用していることがわかりました。 media.css &のように1つにまとめると、問題の半分が解決されます。複数のファイルからメディアクエリを使用すると、競合が発生します。