it-swarm.com.de

Gibt es einen einzigen Satz von Medienabfragen für alle Geräte?

Ich verwende unterschiedliche Medienabfragen für jede Art von Auflösung. Gibt es eine bessere Möglichkeit, dies zu tun?

1
Shyamala

Sie können Hoch- und Querformat verwenden, um festzustellen, ob die Auflösung in der Breite oder in der Höhe länger ist. Im Allgemeinen empfiehlt es sich jedoch, eine Reihe von Medienabfragen zu verwenden die gebräuchlichste Art von Geräten zu brechen. Idealerweise sollte Ihre Website Breiten und Höhen mit Prozentsätzen anstelle von pixelbasierten Elementen verwenden. Auf diese Weise kann sich Ihre Website an nahezu jede Größe anpassen und die meisten ansprechenden Frameworks wird diese Methode verwenden.

Da Sie % anstelle von px verwenden sollten, wird sich die Größe des Texts nicht ändern. Mit einem Satz von 4 Medienabfragen können Sie diese Elemente und alles andere problemlos anpassen .

Häufige Größen für Medienanfragen sind:

  • Handys max-width:640px
  • Tabletten max-width:1024px
  • Desktops max-width:1920px
  • 2K 4K max-width:1921px

Die obigen Auflösungen sehen ungefähr so ​​aus:

    /* Small screen max-width 640px */
    @media only screen and (max-width:40em){}
    /* Medium screen min-width 641px */ 
    @media only screen and (min-width:40.063em){}
    /* Medium screen min-width 641px and max-width 1024px */
    @media only screen and (min-width:40.063em) and (max-width:64em){}     
    /* Large screen min-width 1025px */ 
    @media only screen and (min-width: 64.063em){} 
     /* Large screen min-width 1025px and max-width 1440px */    
    @media only screen and (min-width: 64.063em) and (max-width: 90em){}
    /* Extra large screens  min-width 1441px */
    @media only screen and (min-width: 90.063em){}
     /* Extra large screens  min-width 1441px and max-width 1920px */   
    @media only screen and (min-width: 90.063em) and (max-width: 120em){}
    /* Extra Extra large screens min-width 1921px */  
    @media only screen and (min-width: 120.063em){}

Es sollte nicht darauf geachtet werden, dass die Seite auf allen Geräten exakt gleich dargestellt wird. Bei reaktionsschnellen Designs unterscheiden sich die Seiten von Gerät zu Gerät geringfügig. Dies liegt an der Breite oder Höhe des Geräts.

Was Sie anstreben sollten, ist eine Website, die großartig aussieht und gut mit Auflösungen funktioniert. Beim Entwerfen Ihrer Website können Sie das Browserfenster neu skalieren und sehen, wie Ihre Seite auf verschiedenen Geräten gerendert wird. Sie sollte lesbar sein, gut aussehen und alles, was auf dem Handy nicht funktioniert, sollte dies ändern oder display:none verwenden. Es ist üblich, Funktionen auf Mobilgeräten zu deaktivieren, um das Laden von Seiten zu beschleunigen und die Benutzerfreundlichkeit zu verbessern. Es ist unmöglich und Zeitverschwendung, auf allen Geräten das gleiche Aussehen zu erzielen.

Ich empfehle Ihnen, zu Stack Overflow überzugehen, da es literarische Hunderte von Themen zu Medienabfragen gibt, da eingehende CSS-bezogene Fragen zu Pro Webmasters besser geeignet wären auf SO.

1
Simon Hayter