CSS-Medienabfragen werden durcheinander gebracht

Question

Es ist keine ernsthafte Frage, aber ich möchte nur teilen und mehr Informationen mit CSS-Medienabfragen erhalten.

Ich finde meine eigenen CSS-Media-Abfragen sehr komfortabel, aber es hat immer noch zu viele Fehler darin. So wie wir alle wissen, dass das mobile Gerät heute so schnell wächst, haben einige von ihnen die gleiche Auflösung für Tablet oder sogar für einen Laptop.

ist auf den Fall

bekommen lassen dies ist meine Reihenfolge meiner Medienanfragen in 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. ich es weniger mit Bootstrap machen geben,
2. main.css für dekstop ist Ansicht, eigentlich die beste Aussicht nur auf meine Desktop-Auflösung, die 1920x1080p und darunter ist, ist nicht perfekt.
3. mobile.css ist für Gerät wie Telefon und Tablet, und ich bekomme es nur für die Standard-Handy-Gerät und iPad-Auflösung, Android-Auflösung ein wenig durcheinander gebracht, weil einige der Android-Auflösung ist rau und unidentify, und wenn das Gerät Medienabfragen bekommen weg von 768px wird es vermasselt,

4. laptop.css ist für Laptop-Ansicht und manchmal funktioniert es nicht so gut, wie ich dachte.

   dies ist der CSS-Code für jedes Medium main.css Ebene ist, mobile.css ist wie

   /*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. 
   } 
   

   und 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) { 
       } 
   

dies ist die link, wo ich dies habe Medienanfragen, nicht alle, die ich ausgewählt habe. und ich habe einige meiner Medienabfragen hinzugefügt.

das Beste von allen ist die absolute Position und das Fliegen von 2 Tauchgängen wie der unten abgebildete. hier sieht es immer noch gut aus, aber es ist nicht perfekt, aber ich habe Angst, wenn das Gerät aus meiner Auflösung Medienabfragen ist es wird vermasselt.

so, als Web-Entwickler, was Ihre Fragen Medien? Ich hoffe, du kannst hier eine Antwort und Inspiration finden.

Answer 1

Ich sah, dass Sie mehrere Dateien für Medienabfragen verwenden. Versuchen Sie, sie in einem als media.css & zu kombinieren, wird es die Hälfte Ihrer Probleme lösen. Die Verwendung von Medienabfragen aus mehreren Dateien führt zu Konflikten.