Häufige CSS-Medienabfragen Break Points

Ich arbeite an einer Responsive Web Site mit CSS Media Queries.

Ist das Folgende eine gute Organisation für Geräte? Telefon, Ipad (Landscape & Portrait), Desktop und Laptop, großer Bildschirm

Was sind die gebräuchlichen Medienabfrage-Knickpunktwerte?

Ich plane die folgenden Breakpoints zu verwenden:

  • 320: Smartphone-Porträt
  • 481: Smartphone-Landschaft
  • 641 oder 768 ???: IPad Portrait ???
  • 961: IPad Landschaft / Kleiner Laptop ???
  • 1025: Desktop und Laptop
  • 1281: Breitbild

Was denken Sie? Ich habe ein paar Zweifel als ??? Punkte.

   

Anstatt zu versuchen, @media-Regeln auf bestimmte Geräte auszurichten, ist es praktischer, sie stattdessen auf Ihrem speziellen Layout zu basieren. Verkleinern Sie also Ihr Desktop-Browser-Fenster und beobachten Sie die natürlichen Haltepunkte für Ihre Inhalte. Für jede Site ist das anders. Solange das Design bei jeder Browserbreite gut fließt, sollte es auf jeder Bildschirmgröße ziemlich zuverlässig funktionieren (und es gibt viele und viele von ihnen da draußen.)

Ich habe benutzt:

@media only screen and (min-width: 768px) { /* tablets and desktop */ } @media only screen and (max-width: 767px) { /* phones */ } @media only screen and (max-width: 767px) and (orientation: portrait) { /* portrait phones */ } 

Es hält die Dinge relativ einfach und ermöglicht es Ihnen, etwas für Telefone im Hochformat etwas anders zu machen (oft muss ich verschiedene Elemente für sie ändern).

Ich benutze 4 Breakpoints, aber wie ralph.m sagte jede Site ist einzigartig. Du solltest experimentieren. Es gibt keine magischen Breakpoints aufgrund so vieler Geräte, Bildschirme und Auflösungen.

Hier ist was ich als Vorlage benutze. Ich überprüfe die Website für jeden Unterbrechungspunkt auf verschiedenen mobilen Geräten und die Aktualisierung von CSS für jedes Element (ul, div usw.) wird für diesen Unterbrechungspunkt nicht korrekt angezeigt.

Bisher habe ich an mehreren Responsive-Websites gearbeitet.

 /* SMARTPHONES PORTRAIT */ @media only screen and (min-width: 300px) { } /* SMARTPHONES LANDSCAPE */ @media only screen and (min-width: 480px) { } /* TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { } /* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { } 

AKTUALISIEREN

Seit September 2015 benutze ich einen besseren. Ich finde heraus, dass diese Medienabfragen mit vielen anderen Geräten und Desktop-Bildschirmauflösungen übereinstimmen.

Alle CSS für den Desktop auf style.css haben

Alle Medienabfragen in responsive.css: Alle CSS für responsive Menü- + Medienbruchpunkte

 @media only screen and (min-width: 320px) and (max-width: 479px){ ... } @media only screen and (min-width: 480px) and (max-width: 767px){ ... } @media only screen and (min-width: 768px) and (max-width: 991px){ ... } @media only screen and (min-width: 992px) and (max-width: 1999px){ ... } 

Dies ist von CSS-Tricks Link

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Ich kann Ihnen sagen, ich verwende nur einen einzigen Haltepunkt bei 768 – das ist min-width: 768px , um Tablets und Desktops zu dienen, und max-width: 767px , um Telefone zu bedienen.

Ich habe seitdem nicht zurückgeblickt. Es macht die reaktionsschnelle Entwicklung einfach und nicht mühsam und bietet eine vernünftige Erfahrung auf allen Geräten zu minimalen Entwicklungszeitkosten, ohne dass man ein neues Android-Gerät mit einer neuen Auflösung fürchten muss, die Sie nicht berücksichtigt haben.

Ziehen Sie die Break Points von Twitter Bootstrap in Betracht. Mit solch einer massiven Annahmequote solltest du sicher sein …

Medienabfragen für Standardgeräte

Allgemein für Mobilgeräte, Tablets, Desktops und große Bildschirme

1. Mobiles

  /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 

2. Tabletten

 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } 

3. Desktops und Laptops

 @media only screen and (min-width : 1224px) { /* Styles */ } 

4. Größere Bildschirme

 @media only screen and (min-width : 1824px) { /* Styles */ } 

Im Detail einschließlich Landschaft und Porträt

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* Tablets, iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Tablets, iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Tablets, iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Referenz

 @media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/} @media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/} @media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/} @media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/} @media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/} @media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */} 

Ich benutze Desktop immer zuerst, Handy zuerst hat nicht höchste Priorität, oder? IE <8 zeigt mobile css ..

 normal css here: @media screen and (max-width: 768px) {} @media screen and (max-width: 480px) {} 

manchmal einige benutzerdefinierte Größen. Ich mag Bootstrap etc. nicht

Wenn Sie zu Google Analytics gehen, können Sie sehen, welche Bildschirmauflösungen Ihre Besucher auf der Website verwenden:

Zielgruppe> Technologie> Browser und Betriebssystem> Bildschirmauflösung (im Menü über den Statistiken)

Meine Website bekommt ungefähr 5.000 Besucher pro Monat und die Dimensionen, die für die kostenlose Version von responsinator.com verwendet werden, sind eine ziemlich genaue Zusammenfassung der Bildschirmauflösungen meiner Besucher.

Dies könnte Sie davor bewahren, zu perfektionistisch zu sein.

Anstatt Pixel zu verwenden, solltest du em oder prozentual verwenden, da es anpassungsfähiger und flüssiger ist.

HTML5 rockrs lesen, mobile zuerst

Deine Breakpoints sehen wirklich gut aus. Ich habe 768px auf Samsung Tablets versucht und es geht darüber hinaus, so dass ich das 961px wirklich mag. Sie benötigen nicht unbedingt alle, wenn Sie reaktionsschnelle CSS-Techniken wie % width/max-width für Blöcke und Bilder (auch Text) verwenden.

Halten Sie Ihren Code sauber und Stylesheets logisch getrennt pro Bildschirm “Media” Typ Config …

1) Verwendung der Antwort von Himansu von oben als Referenz: Gemeinsame CSS-Medien-Abfragen Break Points
UND
2) https://www.w3schools.com/css/css3_mediaqueries.asp

Ihre Antwort wäre: