Wenn du denkst, responsive sei einfach, tust du mir leid, mein Sohn. Wir haben 99 Viewports, aber das iPhone ist nur einer.
—Josh Brewer, 10. März 2010
Ein wichtiger Bestandteil des responsiven Designs ist es, die richtige Erfahrung für das richtige Gerät zu schaffen. Bei einer Milliarde verschiedener Geräte auf dem Markt kann dies eine schwierige Aufgabe sein. Wir haben Media Queries zusammengestellt, die verwendet werden können, um Designs für viele Standard- und beliebte Geräte anzupassen, was sicherlich lesenswert ist.
Wenn Sie eine umfassende Liste von Media Queries suchen, ist dieses Repository eine gute Ressource.
Wenn Ihre Reaktion darauf ist: Sie sollten Ihre Breakpoints niemals auf Geräten basieren!! Haben Sie einen guten Punkt. Justin Avery hat einen schönen Beitrag über die möglichen Fallstricke bei der Verwendung gerätespezifischer Breakpoints. Die Wahl der Breakpoints basierend auf Ihrem Design und nicht auf bestimmten Geräten ist ein kluger Weg. Aber manchmal braucht man nur ein wenig Hilfe, um eine bestimmte Situation in den Griff zu bekommen.
Telefone und Handhelds
iPhone
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}Galaxy-Telefone
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S6 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}HTC-Telefone
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}Google Pixel
/* ----------- Google Pixel ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Google Pixel XL ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}Nexus-Telefone
/* ----------- Nexus 4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Nexus 5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Nexus 6 and 6P ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}Windows Phone
/* ----------- Windows Phone ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px) {
}
/* Portrait */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: landscape) {
}
Laptops
Media Queries für Laptops sind ein bisschen ein Gigant. Anstatt bestimmte Geräte anzusprechen, versuchen Sie, einen allgemeinen Bildschirmgrößenbereich festzulegen und dann zwischen Retina- und Nicht-Retina-Bildschirmen zu unterscheiden.
/* ----------- 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) {
}
Tablets
iPad
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* 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, 4 and Pro 9.7" ----------- */
/* 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) {
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}Galaxy-Tablets
/* ----------- Galaxy Tab 2 ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* ----------- Galaxy Tab S ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}Nexus-Tablets
/* ----------- Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* ----------- Nexus 9 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
Wearables
/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
Mehr zu Media Queries
- Media Queries Level 3 (W3C)
- Ein vollständiger Leitfaden zu CSS Media Queries (CSS-Tricks)
- CSS Media Queries: Kurzübersicht & Anleitung (DigitalOcean)
Ziemlich nützlich! Ich werde es aber ausprobieren müssen.
Was verwenden Sie, um auf Ihrer aktuellen Website zwischen mobiler Breite und voller Breite zu wechseln?
Ich sehe es nicht ganz in Ihrer Quelle.
Er verwendet keine andere Breite nur für Mobilgeräte. Er verwendet Dinge wie
Dies besagt lediglich, dass immer dann, wenn eine Bildschirmgröße größer als `500px` ist, bestimmte Stile angewendet werden, und wenn sie darunter liegt, werden andere Eigenschaften angewendet.
Ich sehe es nicht ganz in Ihrer Quelle.
Antwort ↓
Hallo, ich bin neu in der Programmierung. Ich habe eine Umfrage, die ich starten möchte, und es ist möglich, dass meine Befragten nicht die gleichen Tablets haben werden. Kann ich alle Skripte für die verschiedenen Tablets kombinieren?
Bulma (Frontend-Framework) verwendet 768px als maximale mobile Breite und 769px als minimale Tablet-Breite. Ist das richtig? Ich sehe das NIRGENDWO SONST in Gebrauch. Überall sonst ist der Breakpoint zwischen Mobil und Tablet 767px bis 768px. Übersehe ich etwas? Oder hat Bulma die Notiz dazu verpasst?
Gerade Ihren Beitrag über die Verwendung von CSS für alternative Stile für Websites basierend auf der Bildschirmauflösung gelesen. Großartiger Beitrag.
Ich frage mich, ob ich Sie bezahlen kann, um mir eine einfache Vorlage für HTML-E-Mails (die wie Text aussehen) zu erstellen, die auf Mobilgeräten und Desktops gut aussieht. Hier sind die Spezifikationen…
Wenn die Bildschirmgröße kein Mobilgerät ist, muss der Textbereich bei 350px umbrochen werden.
Wenn die Bildschirmgröße ein Mobilgerät ist, möchte ich, dass der Text zu 100 % über den Bildschirm umbrochen wird (im Quer- oder Hochformat) mit einer maximalen Breite von 350px (im Falle eines iPad im Querformat).
Ich benötige, dass der Text selbst eine Schriftgröße von +1 hat (damit er etwas größer aussieht als die normalen E-Mails des Benutzers).
Was ich vermeiden möchte, ist die Verwendung einer 350px-Tabelle zum Umbrechen des Textes und dann, dass das iPhone den Text kleiner als normal schrumpft… Dies erfordert, dass der Benutzer einen zusätzlichen Schritt des Heranzoomens unternimmt.
Auch vermeiden möchte ich Zeilenumbrüche bei 350px zu verwenden und diese Umbrüche dann auf einem Mobilgerät mitten auf dem Bildschirm zu haben (sieht schrecklich aus).
Sollte für jemanden, der sich damit auskennt, ziemlich einfach sein. Lassen Sie mich wissen, ob Sie es können und wie viel.
Nur zu Ihrer Information: Dies ist unmöglich, wenn Sie alle E-Mail-Clients unterstützen möchten. Gmail entfernt den Kopf Ihrer Nachricht, sodass Media Queries nicht funktionieren. Das Beste, was Sie tun können, ist, ein flüssiges Layout zu erstellen und `text-size-adjust` zu verwenden.
Gehen Sie zu http://htmlemailboilerplate.com/
Es ist genau das, wonach Sie suchen.
Ich stehe gerade am Anfang meiner Lernkurve in Bezug auf die Verwendung alternativer Stylesheets für verschiedene Geräte. Nach Ihrem Beispiel anderswo habe ich es irgendwie zum Laufen gebracht. Ich teste es auf meinem HTC Desire Android und damit es auf diesem Telefon funktioniert, muss ich es wie folgt einstellen
screen und (min-device-width: 1008px) – HTC Desire ignoriert
screen und (min-device-width: 1009px) – HTC Desire verwendet dieses Stylesheet
Das Desire hat 480x800, also gibt es einen Teil davon, den ich nicht verstehe!
Haben Sie in Ihrem Meta-Tag `device width, initial scale=1` verwendet? Mobile Geräte skalieren ihre Ansichten manchmal neu...
Hier finden Sie weitere Media Query Snippets. http://nmsdvid.com/snippets/
Das ist super!!! Danke.
Diese Media-Query-Snippets sind einfach großartig, gut organisiert und sehr klar. Vielen Dank
Nexus S meldet 533 Pixel im Querformat. Daher funktionieren keine der oben genannten Snippets, wenn das Telefon im Querformat ist, wenn Sie zu Ihrer Website navigieren. Mein iPod hingegen meldet immer 320px im Hochformat, sowie im Querformat. Das Gleiche gilt für das iPhone 4. Es meldet immer 320px.
Ist dieser Satz von Media Queries für den "Mobile-and-up"-Ansatz geeignet?
In meinen Tests scheint "min-width: 321px" die meisten anderen zu überschreiben. Ist das notwendig/hilfreich? Ich bemerke, dass du (Chris) es in deinem Code für diese Seite nicht verwendest. Es sieht so aus, als ob du nur verwendest
Danke!
Sie haben Recht, aber ich bin mir nicht sicher, was hier die Lösung ist. Chris?
Wenn Sie `min-width:321px` und dann `max-width:500px` verwenden, überschreibt die `min-width`-Eigenschaft sie, da sie alle Stile über `321px` anwendet.
Dieses Format verwenden oder nicht...?
Das mag viel zu spät sein. Aber für jeden, der das hilfreich finden könnte…
Wenn Sie auf dieses Problem stoßen, habe ich festgestellt, dass es am besten funktioniert, wenn Sie Ihre @media (min-width: …) vor Ihre @media (max-width: …) setzen, um sie nicht zu überschreiben.
Schöner Artikel. Danke dir
Hey Leute !!!!!
Ich habe ein Problem
Hinsichtlich der Media Queries, die im Android-Browser funktionieren. Ich verwende Dreamweaver CS5.5. Als ich getestet habe, gab es keine Änderung.
Als ich es im Querformat getestet habe, hat es die Standard-Bildschirmbreite des Webbrowsers angenommen, nicht die Geräte-Bildschirmbreite.
Gleiches Problem. Android-Browser übernimmt Standard-Stylesheet anstelle von Mobile-Stylesheet. Test auf Nexus S.
Ich glaube, ich habe es herausgefunden. Wenn ich „(max-device-width: 800px)“ verwende, funktioniert es. Ich schätze, @media erkennt, dass mein Nexus 480x800 ist und nimmt die höhere Zahl als Breite.
Wenn ich dies verwende, um ein Stylesheet für Retina-Displays anzufordern
<link rel=’stylesheet’ type=’text/css’ href=’/css/mobile-retina.css’ media=’only screen and (-webkit-min-device-pixel-ratio: 2)’/>
Ich kann den W3 Validator nicht dazu bringen, dies zu validieren. Der Fehler ist: Bad value only screen and (-webkit-min-device-pixel-ratio: 2) for attribute media on element link: Expected a letter at start of a media feature part but saw – instead.
Gibt es eine Möglichkeit, den in diesem Beitrag erwähnten Wert „-webkit-min-device-pixel-ratio“ so zu verwenden, dass er „gültig“ ist?
Mike
Ich würde Ihre mobile-retina.css in Ihre Haupt-CSS-Datei aufnehmen?
Beispiel
Niemand validiert HTML wirklich mehr, da es so viele sich entwickelnde Standards gibt. Wenn Ihre Website funktioniert, warum kümmern Sie sich dann?
Nein. Jede CSS-"Erweiterung", die rendering-engine-spezifisch ist, wird nicht validiert. Alles, was mit -moz für Mozilla oder -webkit beginnt, zum Beispiel… obwohl es funktioniert… ist technisch nicht gültig.
Ist dieser Thread bitte veraltet? Gibt es einen aktuelleren Leitfaden für Standard-Media-Queries??
Ich bin so etwas wie ein Neuling in Media Queries, also entschuldigen Sie bitte, wenn ich mit den neuesten Media Queries-Codes nicht vertraut wirke. Ich lese diese Kommentare jedoch zum ersten Mal und sie sind über 3 Jahre alt. Hat diese Seite bitte einen aktualisierten Thread??
(orientation : portrait) wird für CSS3 nicht validiert… Ignorieren Sie das? Oder haben Sie eine Problemumgehung?
Vielen Dank….
Ich schreibe gerade eine Seite, die das Hintergrundbild für jedes Bildschirmgerät ändert, da die Desktop-Version hochauflösende Fotos enthalten wird. Ich möchte also nicht, dass mobile Benutzer diese supergroßen Bilder herunterladen. Ich möchte, dass meine CSS-Dateien getrennt sind, also schreibe ich meine Media Queries zum Beispiel so
Also eine kurze Frage. Wenn ich eine Seite besuche, die Media Queries verwendet, lädt der Browser alle Stylesheets herunter oder nur dasjenige, das angesprochen wurde? In meinem Fall sollte die styles.css immer geladen werden und dann werden die anderen Media-abgefragten Stylesheets geladen, je nachdem, ob sie wahr sind oder nicht.
Ihre Fragen haben keine 100% eindeutige Antwort, jedoch habe ich letzte Woche dazu recherchiert und bin zu einer einfachen Erklärung gekommen. Wenn Sie display:none verwenden, haben Sie eine bessere Chance, dass dieses Element nicht vom Browser gerendert wird. Wenn Sie visibility:hidden verwenden, wird das von Ihnen konfigurierte Element von Ihrem Browser vorab geladen. Im Grunde hängt alles davon ab, wie die Änderung in Ihrem Stylesheet erfolgt, um das Objekt auszublenden oder anzuzeigen – und natürlich davon, welcher Browser/Plattform/Gerät der Benutzer zugreift.
Wenn Sie alle CSS-Dateien in einer Datei platzieren (einschließlich Media Queries), lädt das Gerät alle Assets herunter, unabhängig von den Geräteabmessungen. Auch wenn Sie `display:none` verwenden, um das Element vollständig aus der Architektur der Website zu entfernen, werden seine Assets dennoch heruntergeladen.
Am besten verwenden Sie ein globales Stylesheet und richten dann jeden Haltepunkt mit einer eigenen CSS-Datei ein. Auf diese Weise werden NUR diese Datei und ihre Assets angesprochen.
Wenn Sie Desktop-Bilder in Ihr globales Stylesheet laden und dann kleinere Geräte mit kleineren Bildern ansprechen, die größeren überschreiben, laden Sie sowohl das große als auch das kleinere Bild – obwohl das größere nicht angezeigt wird, wird es geladen, wodurch die Ladezeit der Website für mobile Benutzer verlangsamt wird.
Es ist immer am besten, separate Media Query-Dateien zu verwenden, um die Geräte innerhalb des Breakpoint-Bereichs anzusprechen … und immer min- und max-Einstellungen zu verwenden, um diese Geräte anzusprechen, denn wenn Sie nur die min-Größe verwenden und mit der nächstgrößeren (oder kleineren) Größe überschreiben, laden Sie immer noch alle Assets.
Ist es möglich, das iPhone4+ mit einer separaten Media Query anzusprechen als andere Smartphones mit der gleichen min/width-Größe?
Ich frage, weil meine responsive Website (http://www.cortac.com) auf einem iPhone4+ gut aussieht. Bei älteren (2 Jahre alten) Android-Geräten usw. *haftet* die Fußzeile jedoch nicht, und ich hatte gehofft, die Fußzeile einfach `display: none;` anzeigen zu lassen.
Dadurch wird jedoch auch mein iPhone4+-Styling beeinträchtigt, bei dem ich die Fußzeile *anzeigen* möchte. Das Problem ist, dass das iPhone4+ und die normalen *Smartphone*-Min/Max-Abmessungen die gleichen Abmessungen von 320 bzw. 480 ansprechen und ich nicht in der Lage bin, separate Geräte mit gleichen Breiten/Höhen-Verhältnissen unterschiedlich anzusprechen, ohne dass sie sich gegenseitig überschreiben. Alle Online-Artikel, die dies behandeln, wären sehr willkommen!
Haben Sie versucht, die Existenz eines Retina-Displays (-webkit-min-device-pixel-ratio) zu überprüfen?
LOL!
„Jeremy Mansfield: Jesus-Liebhaber…“
Wunderschöne Seite, Jeremy! Und ich mag wirklich, wie Sie sie mit Media Queries aufgeteilt haben. Ich bin auf diesen Beitrag gestoßen, als ich nach dem gleichen Problem suchte, das Sie hatten – alles in allen Telefonbrowsern gleich aussehen zu lassen. Ich denke, dieser Thread könnte mir helfen. Vielen Dank für den Beitrag und machen Sie weiter so.
Sie können bestimmte Geräte nicht mit CSS ansprechen… hier kommt adaptives Design ins Spiel, indem Javascript (oder Jquery) und CSS gemischt werden, um bestimmte Geräte anzusprechen, Haltepunkte festzulegen und alles andere, was CSS nicht kann, und dann die Stile anzuwenden, die durch das adaptive Targeting zugeordnet sind.
Amit Nagar! Und ich mag wirklich, wie Sie es mit Media Queries aufgeteilt haben. Ich bin auf diesen Beitrag gestoßen, als ich nach dem gleichen Problem suchte, das Sie hatten – alles in allen Telefonbrowsern gleich aussehen zu lassen. Ich denke, dieser Thread könnte mir helfen. Vielen Dank für den Beitrag und machen Sie weiter so.
Lässt der Trick, den "german" an "Mike" geschrieben hat, Sie das iPhone4 ansprechen? iPhone4 und iPhone4S sind diejenigen mit dem Retina-Display?
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* hier kommen Stile von mobile-retina.css */
}
Das sollte funktionieren, oder? Legen Sie das einfach in Ihre Haupt-CSS-Datei, wo Sie die Fußzeile ausblenden, aber dann einen Stil hinzufügen, um sie anzuzeigen…
Außerdem habe ich die Website auch überprüft, sie sieht großartig aus. Eine Frage, die ich habe, ist, wenn ich den Browser einklappe, bemerke ich, dass Sie immer den gleichen Satz von Bildern verwenden. Planen Sie, dies so zu belassen, oder werden Sie es für mobile Geräte optimieren, indem Sie den Hintergrund nicht so groß machen?
Ich habe meine Seite so gestaltet, dass sie ein anderes Hintergrundbild lädt, je nachdem, um welches Gerät es sich handelt. Ich möchte auf meinem Telefon keinen 150-200 KB großen Hintergrund herunterladen, wenn ich es nicht muss.
Robbie, vielen Dank für Ihre Antwort. Ich habe die Stile für das Retina-Display allein, zusätzlich zu den regulären Smartphones, und es scheint nicht zu funktionieren, zwischen den beiden zu unterscheiden. Wenn ich die Fußzeile für normale Smartphones eliminiere, überschreibt es die Retina-Stile trotzdem. Scheint bisher alles oder nichts zu sein.
Ja, vielen Dank für Ihre Beobachtung. Ich plane tatsächlich, kleinere Hintergrundbilder für die mobile Version zu laden. Ich habe diese Media Queries nur noch nicht hinzugefügt, da dies für mich ein laufendes responsives Experiment ist.
Verwenden Sie dies, um bestimmte Geräte anzusprechen
(function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);Dann rufen Sie navigator.vendor auf, um das Gerät zu bestimmen.
Sie sollten so etwas in der Antwort sehen
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16Mein Problem ist dasselbe wie Marks. Ich verwende derzeit Bootstrap und es scheint, als sollten die Layoutänderungen vorgenommen werden, wenn die Seite im iPad vertikal ist, aber das Layout ändert sich nur, wenn ich die Media Queries von 768px auf 769px ändere. Ich bin mir sicher, dass dies nicht die richtige Vorgehensweise ist…
Dies steht in meiner header.php
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Es gibt mehrere Gründe, `viewport-width` anstelle von `device-width` zu verwenden.
Lesen Sie mehr unter
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
Sie, mein Herr, sind ein Genie. Funktioniert wie ein Zauber! iPhone4+ zeigen jetzt ein anderes CSS an, und ich kann meinen Desktop-Browser jetzt auf eine Mindestbreite von 800px und nicht auf die Mindestbreite von 1136px (iPhone4+) einstellen.
Hallo, jetzt möchte ich die |Home|-Seite in mein Web einfügen. Können Sie mir das erklären?
@Run Raksmey
Sicher, per Fed Express, $1.78 pro Pixel.
Hallo,
Ich habe in einem aktuellen Projekt Media Queries verwendet. Wenn ich auf dem iPad vom Hochformat in den Querformat-Modus wechsle, erscheint es skaliert, d.h. es ist bereits gezoomt. Ich möchte, dass es im Originalseitenzoom sowohl im Hoch- als auch im Querformat angezeigt wird.
Irgendeine Lösung dafür?
Ja, dafür gibt es Lösungen. Die einfachste ist, Chrome anstelle von Safari zu verwenden, da dies ein Fehler im mobilen Safari ist. Sie können auch meinen Beitrag auf Forrst für verschiedene Problemumgehungen lesen http://forrst.com/posts/Fixes_for_Mobile_Safari_Zoom_Orientation_bug-2S0, ich verwende derzeit die Beschleunigungssensor-basierte Lösung.
Sie können dies mit etwas Javascript überwinden.
Fügen Sie dies Ihrem `<head>`-Element hinzu.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dann
Hey, kannst du bitte sagen, was du meintest mit...
wenn Sie auf dem iPad vom Hochformat in den Querformat-Modus wechseln, erscheint es skaliert?
Hallo!
Bin ich wirklich der Einzige mit Problemen bei der Verwendung von Media Queries und Desktop Safari?!
@media only screen and (min-device-width : 321px)
zielt auch auf Safari-Browser auf dem Desktop ab, unabhängig von der Größe des Browserfensters.
Sie sind nicht der Einzige mit Safari-Problemen. Ich habe die gleichen Probleme mit Safari, das @media css in JEDER Auflösung aufnimmt. Das Problem ist, dass ich ein @media body {overflow:hidden} gemacht habe und Safari jetzt nicht mehr scrollt, lol.
Sie müssen auch einen `max-width`-Haltepunkt hinzufügen … der Stil, den Sie in `min-width` festlegen, beginnt bei der Größe und geht nach oben und wird vererbt.
Das ergibt absolut Sinn!
Sie sagten, jedes Bildschirmgerät mit über 320 Pixeln anzupassen. Das ist jedes Gerät außer sehr alten Telefonen, und Sie baten darum, die Gerätegröße zu berücksichtigen, nicht die Breite, also kümmert es sich überhaupt nicht um die Größe Ihres Browserfensters… nur um die Breite der Geräte.
Nur ein Schuss ins Blaue, um Ihnen zu helfen, aber Sie sagen, dass die minimale Breite 321px sein muss, was Ihr Safari mindestens 321px breit ist, also wird es natürlich dort auslösen.
Versuchen Sie stattdessen `max-width` zu verwenden.
Sehen Sie sich das obige Codebeispiel an, Sie sehen, dass er für Smartphones `(max-width:320px;)` verwendet.
Ja, ich weiß, aber ich beziehe mich auf dies in den Beispielen
/* Smartphones (Querformat) ———– */
@media only screen
und (min-width : 321px) {
/* Stile */
}
Eine Änderung zu min-device-width hilft auch nicht.
Anstatt `@media only screen and (min-device-width: 321px) {}` zu verwenden…
Verwenden Sie `@media only screen and (max-device-width: 480px) {}`
Funktioniert wie ein Charme!!! ☺
Welche Höhen wären mit den Breiten verbunden? Ich mache mir Sorgen wegen Problemen über dem Falz.
Sie müssten jedes Gerät, das Sie ansprechen möchten, recherchieren, um die Höhen herauszufinden, oder das Telefon mit der niedrigsten Auflösung als Referenz verwenden.
Ehrlich gesagt, sollten Sie Ihre Seite einfach so strukturieren, dass alle wichtigen, vitalen Dinge oben und weniger vitale Dinge darunter liegen.
Und gestalten Sie es so, dass Ihre sekundären Dinge teilweise sichtbar sind, damit sie wissen, dass sie scrollen müssen, aber ich denke, das ist meistens impliziert.
Schauen Sie sich andere mobile Websites an und messen Sie.
Der Seitenfalz ist ein Mythos… die Leute wissen, wie man scrollt. Besonders im mobilen Web.
Hallo zusammen,
Ich bin noch ziemlich neu bei diesen Media Queries, also übersehe ich vielleicht etwas, aber ich versuche, Lessframework auf einer Seite zu implementieren und auf meinem iPhone4 passiert etwas Seltsames
– im Hochformat wird die Seite einwandfrei angepasst, aber wenn ich ins Querformat drehe, geht die Seite über die Grenzen hinaus
– wenn ich die Seite im Querformat aktualisiere, sieht die Seite einwandfrei aus
Ich habe genau das Gleiche auch auf ihrer Website http://www.lessframework.com bemerkt.
Weiß jemand, wie man das beheben kann?
Vielen Dank,
Vic
Ich hatte das gleiche Problem auf dem iPad. Das ist ein iOS-Bug.
Ein kleines Javascript hat das Problem behoben.
Siehe: http://stackoverflow.com/questions/5434656/ipad-layout-scales-up-when-rotating-from-portrait-to-landcape
Hallo Chris,
Ich bin GUI-Designer. Beim Design für eine mobile Website mit iPhone Retina Display verwende ich traditionell eine Auflösung von 640x960. Sollte ich beim Design für Mobile oder iPad in PS die hochauflösende Anzeige kompensieren oder einfach mit 320px (72 DPI)/768px (72 DPI) entwerfen?
Danke für die Hilfe.
Jared
Hallo Jared,
Ich würde versuchen, eine der heute unterstützten höchsten Auflösungen wie das iPad mini Retina zu erreichen,
2048 x 1536 Auflösung bei 326ppi.
Dann würde ich bei Bedarf skalierte Versionen exportieren.
Hey da!
Vielen Dank für die nützlichen Informationen. Ich bin ein Neuling und hungrig nach guten Ratschlägen, und auf großartige Inhalte und Designs zu stoßen, inspiriert mich noch mehr.
Ich liebe Ihre Eingabefelder mit den Bildern darin! Können Sie mir sagen, wie oder wo ich herausfinden kann, wie man sie verwendet?
Danke, Marc
Ich liebe wirklich die Idee eines Boilerplate-Snippets für Queries, aber die Portrait- und Landscape-Queries für Smartphones (genauer gesagt für iPhones) scheinen in meinen Tests fehlerhaft zu sein.
Ich bin auch neugierig, warum wir die Geräteorientierung für diese Aufgabe nicht nutzen sollten… scheint auch etwas plattformunabhängiger zu sein. Das Erkennen des Hochformat-Modus würde dann etwa so aussehen…
Ich habe Probleme, Ihren Ansatz zu verstehen. Ich habe in letzter Zeit mit einem Framework gearbeitet und an einem responsiven Rastersystem gearbeitet. Vielleicht verstehe ich das anders, aber ich setze meine responsiven Teile in einem separaten Stylesheet zu einem anderen Stylesheet, das ich "global" oder "base" nenne, wo das Hauptrastersystem hineingeht. In diesem Teil Ihres Skripts
/* Desktops und Laptops ———– */
@media only screen
und (min-width : 1224px) {
/* Stile */
}
/* Große Bildschirme ———– */
@media only screen
und (min-width : 1824px) {
/* Stile */
}
Sie haben 1824px, was ja verständlich ist, sehr große Bildschirme, größer als mein iMac-Monitor, so dass sich das Rastersystem erweitern kann. Aber dann haben Sie 1224px, okay, das ist größer als die Auflösung meines MacBook, aber 1200px ist zumindest meine iMac-Größe und für mich die Standardgröße jedes Bildschirms ungefähr.
Nun, worauf ich hinaus will, ist dieses Beispiel
RESPONSIVES STYLESHEET
/* Desktops und Laptops ———– */
@media only screen
und (min-width : 1224px) {
/* Stile */
#container {width:1170px}
}
GLOBALES STYLESHEET
#container {width:980px}
Nun habe ich das Gefühl, dass auf meinem (ungefähr) 1200px großen Monitor diese beiden Größen kollidieren werden. Warum nicht (min-width : 1224px) löschen und einen viel größeren Pixelwert festlegen?
Ich hoffe, das macht Sinn. Nun, so habe ich es gemacht, was für mich mehr Sinn macht. Zwischen 768px und 1824px kann ich dann das Rastersystem normal in jeder gewünschten Größe erstellen, und wenn es unter 768px oder über 1824px geht, ändert es sich. Aber es gibt keine Vermischung.
/* Große Desktop- und Laptop-Bildschirme (Geräte und Browser) */
@media only screen and (min-width: 1824px) {}
/* Tablet-Geräte, Desktop- und Laptop-Bildschirme */
@media only screen and (max-width: 768px) {}
/* iPads (Hoch- und Querformat) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* Smartphones (Hoch- und Querformat) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}
@media print {}
Die einzige andere Idee, die ich hatte, ist, dass Sie das CSS nirgendwo anders erstellen und die 1224px das sind, was es ist, aber was, wenn ein Raster 960 oder 980px ist, was typisch ist.
Sie haben auch ein `and (min-device-width : 768px) and (max-device-width : 1024px)`. Ich weiß, dass es eine `device-width` ist, wird das nicht auf einem Desktop- oder Laptop-Computer Auswirkungen haben?
Entschuldigung für die direkten Fragen, aber ich versuche nur, es zu verstehen, und ich stelle viele Fragen. :)
Verwenden Sie Ihr Basis-/Global-Stylesheet für das 'Styling' und Ihre Media-Query-Dateien für die Layout-Dimensionen und Textüberschreibungen. Sie werden nie Probleme mit kollidierenden Größen haben
Gibt es eine Möglichkeit, zwischen einem iPhone 4 und einem iPad 3 zu unterscheiden…? Nur das Pixel-Verhältnis scheint nicht zu funktionieren…
Alte iPads werden unterschieden, aber die neuen nicht…
Danke,
JH
Ich lerne gerade, aber das könnte das sein, wonach Sie suchen?
/**********
iPad 3
**********/
@media
nur Bildschirm
und (min-device-width : 768px)
und (max-device-width : 1024px)
und (orientation : landscape)
und (-webkit-min-device-pixel-ratio : 2) {
/* Stile */
}
@media
nur Bildschirm
und (min-device-width : 768px)
und (max-device-width : 1024px)
und (orientation : portrait)
und (-webkit-min-device-pixel-ratio : 2) {
/* Stile */
}
/**********
iPhone 4+
**********/
@media
nur Bildschirm
und (min-device-width : 320px)
und (max-device-width : 480px)
und (orientation : landscape)
und (-webkit-min-device-pixel-ratio : 2) {
/* Stile */
}
@media
nur Bildschirm
und (min-device-width : 320px)
und (max-device-width : 480px)
und (orientation : portrait)
und (-webkit-min-device-pixel-ratio : 2) {
/* Stile */
}
Hallo…
Wie kann ich spezielle Styles für das iPhone4 Retina im Querformat erstellen?
Ich kann das Hochformat anwenden… aber wenn ich mein iPhone drehe… gehen die Styles verloren
Das ist richtig?
Gazu, so style ich für das Querformat mit Media Queries
@media screen and (max-width:480px) and (orientation: landscape){}
Um den Safari-Bug zu beheben, habe ich dies in den Head eingefügt
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />
Du hast meinen Tag gerettet, danke!
Vielen Dank Vic
Wir haben kürzlich eine neue Website mit responsivem Design gestartet.
Wir hören jedoch von einigen Benutzern, dass die Website auf einigen Mobilgeräten: HTC, Windows Phones usw. nicht responsiv ist.
Wenn ich in einem Emulator teste, sieht die Website auf den hervorgehobenen Geräten gut aus, aber auf einigen Geräten scheint es immer noch nicht zu funktionieren.
Irgendwelche Ideen?
http://www.zappybaby.be/nl
http://forum.zappybaby.be
Ich kann keine Media Query in Bigcommerce-Vorlagen verwenden, es hat nicht funktioniert. Brauche ich dafür ein Java-Skript? Bitte helfen Sie mir.
Nein danke, jetzt habe ich Media Queries gut genutzt
Hallo,
Wir planen eine Tablet-Version unserer bestehenden Website mit völlig anderen Inhalten. Nun, ich möchte nur die CSS-Media-Query für alle Tablets kennen, d.h. Android, iPads, Noble Nook, Kindle usw.
Ich bin tatsächlich neu in diesem Bereich.
Wenn ich auf meinem iPhone vom Hochformat ins Querformat wechsle, wird die Website nicht richtig ausgerichtet. Sie läuft über. Ich habe einen 480px-Stil festgelegt, also was mache ich noch falsch? Kann mir jemand helfen?
Sie sollten prozentbasierte Werte innerhalb des Stylesheets verwenden und eine maximale und minimale Breite für den Link zu den Stylesheets festlegen. Alles sollte flüssig sein, außer den Breakpoints, aber der Viewport über 900/960px kann einen festen Wert haben.
Vielleicht weiß ich, was Ihr Problem ist. Auf dem iPhone gibt es beim Wechsel vom Hoch- zum Querformat einen Bug, der den Benutzerzoom durcheinanderbringt, wodurch es überläuft (wenn ich Ihr Problem richtig verstehe). Wenn das der Fall ist, müssen Sie herauszoomen, um es "manuell zu beheben", nicht wahr?
Hier gibt es ein cleveres Skript http://github.com/scottjehl/iOS-Orientationchange-Fix, das es für den Benutzer automatisch beheben kann, und es funktioniert ziemlich gut!
Hey, ich habe versucht, etwas zu machen, um so etwas wie "für alles mit device-pixel-ratio > 1, verwende dies" zu sagen.
Ich habe etwas mit dem not Operator versucht
@media not screen and (max-device-pixel-ratio: 1) { stuff }Lohnt es sich Ihrer Meinung nach?
Übrigens habe ich mich gefragt, ob dafür noch Herstellerpräfixe benötigt werden oder nur das Standard-Präfix.
meh, das Ganze ist falsch X)
Ich meinte
@media screen and (not max-device-pixel-ratio:1) {stuff }es scheint immer noch nicht zu funktionieren. Ich denke, der allgemeine min-device:1.5 ist viel besser.
@Gruber Vielen Dank für den http://github.com/scottjehl/iOS-Orientationchange-Fix
Das hat für mich funktioniert. Prost. Damir
Dieses ganze Pixel-Fummeln macht keinen Sinn. Beim iPad 4 ist klar: Man muss nach der physikalischen Größe fragen und nicht nach der Pixelauflösung. Selbst auf einem 640 Pixel breiten iPad macht ein zweispaltiges Design einer Webseite keinen Sinn.
Ich habe jetzt meine responsive Webseite realisiert. Siehe http://mm.ymir.de . Sie passt sich nicht nur an kleine Geräte, sondern auch an kleine Browserfenster an. Verengen Sie also einfach die Breite Ihres Browsers und sehen Sie, wie sich die Seite ändert. Auch die Bilder sind responsiv: Beim Laden der Seite werden sie entsprechend Ihrer Fenstergröße geladen.
http://responsive.is/www.bostonglobe.com
Haben Sie getestet, welche Größe (min-width/max-width) das Retina-Display des neuen MacBooks ansprechen kann?
Ich bin mir nicht sicher, ob diese neue *hochauflösende Laptop-Bildschirmauflösung* mit der obigen Media Query für „große Bildschirme“ `(min-width : 1824px)` kollidiert.
Hey Leute, nur damit ihr wisst, wenn ihr Less mit der Less.app auf dem Mac verwendet, akzeptiert es das ursprüngliche 'device-pixel-ratio' von 1.5 oder tatsächlich das Opera-Äquivalent von 3/2 nicht.
Alle Device-Pixel-Ratios müssen nur 2 sein.
Dachte nur, das könnte jemandem da draußen helfen!
Erbsen und Korn.
Plus, Chris – was ist Ihre Meinung zur Strenge der HTML5-Formularvalidierung des URL-Eingabetyps. Ich muss wirklich mein http:// – wirklich? Was ist damit los…
Marcy ist offensichtlich neu in der Webentwicklung.
Ich liebe dich!
Hey Chris, tolle Informationen. Irgendwelche Ideen, wie man mit PHP eine bestimmte Bildschirmgröße überprüfen kann, in diesem Fall für ein iPhone, oder max-screen-size: 320px?
Ich habe Media Queries verwendet, es funktioniert im Browser, wenn ich meinen Browser in der Größe geändert habe, aber es funktioniert nicht mit Mobilgeräten, iPad, Android, Android Mobile Bildschirmbreite 320px, aber es nimmt @media only screen and (min-width:768px) and (max-width:1024px) diese Query an, was mache ich?
Vergessen Sie nicht den Metatag auf der HTML-Seite
Und für die Auswahl des Designs denken Sie daran, die Breite und Höhe in Zoll oder cm anstelle von Pixeln zu verwenden. Siehe meine Website
meta name=”viewport” content=”width=device-width, initial-scale=1″
Bitte nennen Sie mir eine browserkompatible Media Query für Retina
Verwenden Sie diese Website für Ihre Referenz http://css3please.com/
Hey Leute, wenn es um Responsive geht, gibt es viele Wege, eure Ziele zu erreichen. Wahrscheinlich ist einer der einfachsten und gängigsten Wege der, den Chris hier beschreibt.
Ich habe gelernt, maximale Breiten zu erhöhen, um allgemeine Smartphone-Geräte wie das Samsung Galaxy 3 und andere anzusprechen.
Ähm, was Marcy? Niemand validiert HTML mehr? Sieht so aus, als müssten Sie in einem anderen Bereich arbeiten.
Google liebt gültiges HTML, und seine Crawler auch. Wenn Sie kein gültiges HTML haben, haben Sie keine Website, die es wert ist, indiziert zu werden. Das ist einer der Gründe, warum HTML 5 so großartig ist. Es ist semantisch. Nur weil es funktioniert, heißt das nicht, dass es für Sie oder Ihre Kunden funktioniert.
Bitte beachten Sie dies, wenn Sie Fragen haben.
Google SEO Test – Bevorzugt Google W3C gültiges HTML & CSS?
Sehen Sie, ich arbeite in der Branche und spreche aus eigener Erfahrung. Ich kenne Webstandards und schreibe jeden Tag Code von Hand. Wenn ich auf ein Problem stoße, das ich nicht leicht erkennen kann, ist die Validierung ein potenzielles Werkzeug, aber niemand in meiner Agentur validiert mehr als Teil unseres regulären Arbeitsablaufs. Das ist einfach meine Sichtweise.
@f1ss1on: Sie zerlegen dort Wörter. Marcy sagt nicht: „Alter, schreib einfach kaputtes HTML, das ist cool!“ Sie sagt, man sollte sich nicht zu sehr um Validatoren kümmern, weil sie die Komplexität unseres sich schnell entwickelnden Ökosystems nicht berücksichtigen. Validatoren spucken oft auf Code, der vollkommen in Ordnung ist.
f1ss1on: Aber was wird Ihr Code auf einem Samsung Galaxy 4 und einem iPhone 5 tun? Warum fragen Sie nach Pixelgröße statt nach physikalischen Größen? Es wird nur Ihre Beschäftigung retten, wenn Sie denselben Code immer wieder ändern, um jedes neue Gerät hinzuzufügen.
Marcy sagte auch, dass der Seitenfalz ein Mythos ist. Das ist ein weiterer Fall, in dem sie falsch liegt. Es hat nichts damit zu tun, ob die Leute wissen, wie man scrollt oder nicht – es geht darum, sein Publikum schnell zu fesseln. Den richtigen Inhalt über dem Falz zu platzieren, verleitet sie überhaupt erst zum Scrollen.
Klingt so, als müsste Marcy eine neue Agentur finden.
Was ich nicht verstehe, ist Ihr Bedürfnis, beleidigende persönliche Kommentare wie diese zu machen. Ideen zu debattieren ist großartig – jemanden zu beleidigen und sein Recht, eine Disziplin auszuüben, in Frage zu stellen, ist unreif und unprofessionell.
Wie wäre es, wenn wir uns mehr auf Media Queries und Wissensaustausch konzentrieren und weniger auf das Herabwürdigen von Menschen? Jeder wird von mehr Code und weniger Negativität profitieren.
Der Seitenumbruch ist kein digitaler Begriff … er stammt aus der Zeit, als Zeitungen (erinnern Sie sich daran?) an der Ecke verkauft wurden und der Verleger die spannendsten Geschichten über dem „Umbruch“ der Zeitung verwendete, um sie zu verkaufen. Print-Leute entwickelten sich zu Digital-Leuten und übernahmen Begriffe, die nicht austauschbar waren … Browser scrollen, es gibt also so etwas wie über oder unter dem Umbruch nicht … Ich habe viele Websites gesehen, die nur nach links/rechts scrollen, wo ist also der Umbruch dort? Menschen interagieren mit Websites, deshalb bauen wir sie, warum sollte also alles über dem „Umbruch“ sein? Eine Verschwendung von Design-Ethik, wenn man das tut.
Meiner Meinung nach ist die Verbreitung von Fehlinformationen durch Leute in meiner Branche, die sich als Experten ausgeben, einer ihrer größten Nachteile. Besonders wenn sie ihre Meinungen als Fakten präsentieren, wie Marcy es tat. Junior-Entwickler werden jeden Tag durch Kommentare von Leuten wie diesen in die Irre geführt.
Ihre Antworten sind überdramatisch. Ich habe Marcy nicht persönlich angegriffen; sie versuchte, die Praktiken ihrer Agentur zu verwenden, um eine fehlgeleitete Aussage zu qualifizieren. Ich habe darauf reagiert.
Wieder geben Sie Ihre Meinung als Tatsache wieder und die Meinung anderer als Fehlinformation.
Wenn Sie meine Reaktion als dramatisch empfinden, habe ich nichts mehr hinzuzufügen.
Marcy, ich entschuldige mich dafür, dass ich dich beleidigt habe. Ich werde meine Kommentare in Zukunft anders formulieren.
Hallo zusammen, Vorsicht bei Media Queries! Sie sind nicht pixelgenau.
Manchmal liegen sie nur 20 Pixel daneben, aber ein anderes Mal bis zu 150 Pixel… Doch selbst wenige Pixel sind sehr schlecht, wenn man versucht, einen bestimmten Handybildschirm anzusprechen.
Hallo, ich frage mich, warum
@media only screen
und (min-device-width : 768px)
und (max-device-width : 1024px) {
/* Ihre Stile hier */
}
funktioniert nicht, wenn ich die Website, an der ich arbeite, mit ipadpeek teste. Aber es funktioniert, wenn ich "device-" entferne. Gibt es einen Unterschied zwischen ihnen? Danke, dies ist mein erstes Mal, dass ich eine responsive Website entwickle, daher bin ich etwas verwirrt. Bitte leiten Sie mich an.
Heute hat mir dieser Artikel sehr geholfen :) Danke!
Vhinmanansala, ich lese gerade Ethan Marcottes Responsive Web Design und er erwähnt, dass min-width und min-device-width zwei verschiedene Dinge sind. Ich schätze, die Essenz ist, dass ein Bildschirm nicht als Gerät betrachtet wird.
Hey Leute... ich brauche eure Hilfe..
wenn ich versuche, diesen Code zu verwenden..
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
aber.. wenn ich den Code ändere zu..
@media only screen and (min-width : 768px) and (max-width : 1024px){
}
funktioniert es richtig.. ich bin so verwirrt, was damit passiert.. bitte erklärt es mir..
übrigens, das ist mein Blog http://idwds.blogspot.com an dem ich arbeite.. bitte schaut es euch an
Hey Leute... ich brauche eure Hilfe..
wenn ich versuche, diesen Code zu verwenden.. funktioniert er nicht richtig
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
aber.. wenn ich den Code ändere zu..
@media only screen and (min-width : 768px) and (max-width : 1024px){
}
funktioniert es richtig.. ich bin so verwirrt, was damit passiert.. bitte erklärt es mir..
übrigens, das ist mein Blog http://idwds.blogspot.com an dem ich arbeite.. bitte schaut es euch an
Lieber Lil Fab,
Es hängt von deinem Ansatz zum Code ab. Tatsächlich funktioniert es sehr gut ohne den Begriff "and (orientation : portrait)", da dies bei den meisten Geräten die Standardansicht ist. Aber in einigen Fällen (es kann welche geben), wenn das Gerät horizontal gehalten wird, sollte der CSS-Code geändert werden. Es hängt von deinem Design + der Art der Codierung ab. Meistens, wenn du "Prozentwerte" für die Angabe von Breite, Rand und Polsterung verwendest, wird der entfernte Begriff nicht benötigt. Aber wenn du die Werte in "PX" (Pixel) angibst, musst du "(orientation : portrait)" und "(orientation : landscape)" separat verwenden.
Danke!
@media only screen
und (min-device-width : 320px)
und (max-device-width : 480px) {
/* Stile */
}
Ich habe diese Option verwendet, um einige Elemente für eine meiner Seiten auszublenden.
Es funktioniert gut für iPhone, aber nicht auf anderen Android-Telefonen
Ich habe es so verwendet, um es web- und mobil-responsiv zu machen.
Was ist, wenn ich dieselbe Media Query auf iPad UND Desktop (max-width: 768) anwenden möchte, ohne den Code zu duplizieren? Wie geht das?
Folgen Sie dem Link
https://stackoverflow.com/questions/13076371/media-query-for-ipad-and-desktop-max-width
Sie selbst scheinen es andersherum zu machen. vom größeren Bildschirm zum kleineren. nicht mobile first.
Ich verwende diesen Beitrag immer als Referenz, aber was ist mit den neuen 7-Zoll-Geräten?
Ich verwende dies auch als Referenz… aber wie Spike sagte, was ist mit dem neuen 7″ Nexus und dem iPad Mini. Was ist das Beste dafür?
Wenn jemand hier eine Möglichkeit benötigt, schnell gültige benutzerdefinierte Media Queries zu generieren oder andere gerätespezifische Voreinstellungen nachschlagen muss, habe ich ein kostenloses Media Query Tool namens Media Query Builder geschrieben, das Sie hier finden -> Media Query Builder
Es scheint, dass Sie die Möglichkeit verpassen, sowohl iPads als auch iPhones anzusprechen
Diese Information ist hilfreich, aber gibt es eine Möglichkeit, minimale Media Queries zu schreiben, die auf allen Gerätegrößen funktionieren?
Großartiger Beitrag, sehr praktisch.
Ich habe gerade etwas Seltsames gefunden, das vielen Leuten viel verschwendete Zeit mit Media Queries auf Android-Geräten ersparen könnte
Ich entwickle eine mobile Website und aus irgendeinem Grund würde ein 540x960-Telefon mit Android Jellybean nur das 360-459px breite Stylesheet aufnehmen. Als ich dieses Stylesheet aus dem Header auskommentierte, ignorierte das Telefon die anderen komplett, selbst das, das speziell auf seine Auflösung abzielt.
Nach einer Menge Recherche stellte sich heraus, dass die Standard-Browser-Zoom-Einstellung den Browser an sich nicht wirklich zoomt, sondern seine physische Auflösung ignoriert und vorgibt, eine kleinere zu haben. Nach einigen Experimenten
Es scheint, dass es keine Möglichkeit gibt, den Browser des Benutzers zu zwingen, das Stylesheet in der richtigen Größe zu laden, wenn seine Einstellungen anders sind. Ich dachte nur, ich teile das mit, es hat mir viel Zeit verschwendet, und endlich kann ich weitermachen :) Ich hoffe, es hilft
Hallo nochmal, hier sind noch ein paar Dinge, die ich inzwischen über die Feinheiten von Android-Geräten gelernt habe
Es gibt mehrere Attribute, die auf das Tag angewendet werden können, die die Art und Weise ändern, wie sie den Zoom handhaben. Eines davon ist:
content="target-densitydpi=device-dpi"Dies verhindert, dass das Gerät beim Laden auf die Seite zoomt. Dies löste ein lästiges "gezoomt beim Laden"-Problem, das ich plötzlich mit dem iPhone 4s hatte. Benutzer können weiterhin skalieren (wenn Sie es zugelassen haben), es zielt lediglich auf die tatsächliche DPI-Einstellung des Geräts ab, anstatt sich auf den oft unvorhersehbaren automatischen Zoom zu verlassen. Mein Meta-Tag sieht jetzt so aus
Dies ermöglicht es, dass sich das Layout vollständig an jedes Display anpasst. Der einzige Haken ist das Betriebssystem. Aus irgendeinem Grund kann ich es beim besten Willen nicht auf einem HTC 7 Trophy Windows Phone laden, ohne dass es eingezoomt wird. Irgendwelche Gedanken? Dies ist das einzige Betriebssystem, das jetzt Probleme zu verursachen scheint. Sogar Blackberries funktionieren einwandfrei.
In einer weiteren Anpassung habe ich meine Media Queries aktualisiert, um die meisten Tablets zu ignorieren, während ich immer noch extrem hochauflösende Telefone wie das HTC Droid DNA (1920x1080, wow) berücksichtige. Dazu habe ich einfach eine weitere Media Query mit einer neuen Bedingung unterhalb der Haupt-Query hinzugefügt
Auf diese Weise laden die Telefone wie gewohnt, aber jedes Display, das größer als 960 Pixel ist, muss ein sehr hohes DPI-Display haben, um auf die Stile zugreifen zu können, also wird dies hoffentlich nur für Telefone gelten. Es ist nicht perfekt, da ich noch keine Gelegenheit hatte, es auf dem Retina iPad (DPI jemand?) auszuprobieren, aber es wurde entwickelt, um schnell eine klare Trennung zu ermöglichen.
Anstatt zu versuchen, zu erraten, wie hochauflösend die nächste Generation von Telefonen sein wird, und die Website zwangsläufig auf irgendeinem neuen Gerät in der Zukunft kaputtgehen zu lassen, dachte ich, es sei sinnvoller, einfach keine Begrenzung zuzulassen und stattdessen die Geräte auszuschließen, die ich nicht wollte, indem ich Media Queries verwendete. Wenn Ihr mobiles Layout, das für kleine Bildschirme entworfen wurde, auf einem iPad erscheint, fühlen Sie sich wie ein Kind, das mit dem Löffel gefüttert wird, da die Schaltflächen jetzt groß genug sind, um sie mit den Fäusten zu zerschlagen, anstatt mit dem Finger darauf zu zeigen.
Ich fand, dass einige der Media Queries hier etwas willkürlich waren. Zum Beispiel ist die Smartphone-Landschafts-Query
min-width:321px, mein Desktop-Browser, wenn er breiter als 321px ist, verwendet das Stylesheet, das für Smartphones vorgesehen ist. Da iOS+Safari sich nicht als Handheld-Gerät betrachtet, funktioniert@media handheld and (...nicht, daher stellte ich fest, dass sich einige mit anderen überschnitten, wo sie es nicht sollten. Nach vielen frustrierenden Stunden suchte ich und fand diese Frage auf Stack Overflow, Media Query iPad vs iPhone4Die Media Queries werden verwendet, um gezielt eine Gerätebreite, Pixeldichte (CSS-Verhältnis) und die Ausrichtung anzusprechen. So bleibt sehr wenig Spielraum für ein Gerät, ein nicht dafür vorgesehenes Stylesheet zu verwenden. Obwohl dies etwas mehr Schreibarbeit bedeuten kann, erzielt man eine Konsistenz über alle Geräte hinweg, und ich hatte seitdem nie Probleme mit dieser Methode.
Ich bin noch ziemlich neu bei Media Queries. Ich habe eine Website, für die ich eine mobile Version erstelle. Wenn ich die Seite auf einem iPhone 4s im Hochformat überprüfe, deckt 320px nicht 100% der Breite ab. Ich muss es auf 375px schieben, damit es die Breite der Hochformatansicht abdeckt. Irgendwelche Vorschläge?
Ich verwende: innerhalb des Codes
und
html { -webkit-text-size-adjust: none; }innerhalb von CSSDie von mir verwendete Medienabfrage ist
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)Toller Blog!! Vielen Dank im Voraus
Ich habe dieselben Media Queries für eine Wordpress-Testseite auf localhost ausprobiert. Ich habe das Online-Tool für responsives Design http://ipadpeek.com/ verwendet. Dieses Tool erkennt Hoch- und Querformat-Queries nicht. Aber als ich die auf localhost gehostete Wordpress-Seite direkt getestet habe, indem ich die Bildschirmauflösung meines PCs mit Windows 7 im Hoch- und Querformat geändert habe, funktionierte es.
Ich weiß, der Artikel ist schon eine Weile her, aber hatte jemand ein Problem mit "max-device-width" und Rendering-Problemen?
Mein Eindruck war, dass "max-device-width" nur auf Telefonen, Tablets und mobilen Geräten gerendert wurde, nicht in Desktop-Browsern.
Dies geschieht, wenn der Browser eingestellt ist und die initiale Ladung der CSS-Datei mit der @Media-Abfrage lädt.
Also, wenn ich habe
Wenn die Desktop-Browser- oder Bildschirmauflösung des Desktops auf 1280px eingestellt ist, werden tatsächlich die mobilen 1280px-Stile und nicht die Desktop-Stile gerendert. Haben Browserhersteller "max-device-width" in ihre Browser-Builds integriert? Jegliche Hinweise oder Einblicke wären großartig.
Danke.
Hallo!
Sie haben ein Verhältnis für das iPhone 4 verwendet, aber welches Verhältnis wird für das iPhone 5 funktionieren?
Ich habe meine erste wirklich responsive Website erstellt, mit viel Hilfe von CSS Tricks. Ich habe sie in SCSS mit vielen Media Queries unter Verwendung von Breakpoints erstellt, wie von Chris C. beschrieben. Meine Frage ist: Ich habe nur min-width und max-width verwendet (kein min-device-width oder max-device-width). Ist das falsch? Soweit ich das beurteilen kann, funktioniert meine Website auf allen Geräten einwandfrei, obwohl das Testen von UserAgents mühsam ist. Die meisten meiner Tests stammen vom Ändern der Browsergröße in Chrome, IE und FF und dann von der Verwendung der Chrome Dev Tools zum Testen auf Galaxy Nexus und auch auf dem iPhone meiner Frau. Hier ist ein Beispiel für meine Breakpoints.
Ich bin ganz neu in diesem Thema. Aber das scheint sehr interessant zu sein. Könnten Sie ein Beispiel geben, was @content bedeutet und/oder wo und was darin stehen soll?
Vielen Dank.
Martin - Sicher! Mit dem obigen Code kann ich SCSS und Mixins verwenden, um meine Website einfach mobil-responsiv zu gestalten. Anstatt einen riesigen CSS-Block am Ende meiner Stylesheets zu erstellen und mein gesamtes mobiles CSS dort abzulegen, füge ich mein mobiles CSS ein, während ich mein normales CSS entwerfe. Ich verwende dann ein Gem, das alles für die Produktion ans Ende verschiebt. Mit den obigen Breakpoints könnte mein CSS so aussehen
Wie Sie sehen können, wird SCSS beim Kompilieren meiner Stylesheets das folgende CSS ergeben
Meine obigen Illustrationen waren einfach… aber wenn man das für eine ganze Seite verwendet, wird es super mächtig. Wenn ich zurückgehen und die Bildschirmbreite eines einzigen div auf mobilen Geräten bei 640px bearbeiten muss, gehe ich einfach zu dieser Klasse in meinem CSS und nehme Änderungen vor – ich muss nicht eine ganze Seite mit mobilem CSS durchscrollen, um Änderungen vorzunehmen.
Wie Chris Coyer sagte, ist die oben genannte Methode (mit Mixins und SCSS) die Art und Weise, wie Ihr Gehirn die Punkte verbinden möchte, also warum Dinge anders organisieren. Seit ich damit angefangen habe, kann ich mobil einfach coden, während ich gehe. Ich kann das CSS und die Responsivität einer Website auf einmal zusammenstellen, anstatt zwei separate Elemente.
Danke, es funktioniert bei mir ohne Frameworks :)
Hallo Chris. Toller Artikel. Ich beziehe mich oft darauf. Ich dachte nur, dass sich mit Mobiles und Tablets seit dem Verfassen dieses Artikels im Oktober 2010 viel entwickelt hat und einiges Neues hinzugekommen ist. Kleinere Tablets wurden veröffentlicht und einige mobile Auflösungen sind größer geworden. Hat dies die Grenzen Ihrer empfohlenen Media Queries für verschiedene Geräte etwas verwischt? Oder würden Sie sagen, es ist weitgehend unverändert?
Ich habe einige Tests dazu durchgeführt, und mit einem Sony Xperia S scheint es so, als ob sich die Gerätebreite mit der Ausrichtung ändert (720px dann 1280px).
Dies würde dazu führen, dass man so etwas verwendet, um Android anzusprechen
Das Problem dabei ist, dass es sich mit dem iPad überschneidet, und die Verwendung von
min-device-pixel-ratioreicht nicht aus, um sie zu trennen, wenn man zum iPad 3 kommt, da beide den Wert 2 habenWeiß jemand, wie man Android dazu bringt, sich zu verhalten und trotzdem meine mobile Website nicht auf dem iPad erscheinen lässt.
Das Lesen dieses Artikels http://stackoverflow.com/questions/12061127/css-media-queries-on-nexus-7-display-resolution-not-working-in-code lässt einen denken, dass Android tatsächlich ein Schwein sein wird!
Danke
Chris
@media screen and (orientation: landscape) ist eine gültige Option zur Kombination mit Ihrer Media Query.
WENN NICHT TOUCH = Standard-Desktop
Da Browser-Anbieter den "NOT"-Selektor vom W3C nicht unterstützen, musste ich mich auf JavaScript / jQuery verlassen, um das CSS zu isolieren, das ich nicht auf iOS- und Android-Geräten anzeigen wollte.
Dieser Artikel ist super. Ich werde ihn verwenden.
Diese detaillierte Browser-Kompatibilitätstabelle des Viewports (und einiger verwandter Elemente) von Peter-Paul Koch wird jedem, der sich für dieses Thema interessiert, helfen, Fakten von Utopien zu trennen.
Danke für das Teilen dieses großartigen Artikels…
aber wie können wir pixel-ratio mediaquery verwenden?
Ich habe eine Website Noobpost und versuche herauszufinden, wie viele max-width Größen für Media Queries ich verwenden sollte. Im Moment habe ich vier, aber es scheint nicht gut mit Querformatansichten zu funktionieren. Es scheint auch, dass ich alles in Prozent positionieren muss, um es flüssiger zu machen.
Irgendwelche Ratschläge, was man bei großen Bildschirmen tun soll?
Ich mache mir besonders Sorgen, dass die Zeilenlänge unleserlich wird.
Sie könnten den Inhalt immer einfach auf einer normalen Breite, sagen wir 960 oder 1024 Pixel, auf der Seite zentriert (oder linksbündig) halten, was ihn lesbar machen würde. Um den zusätzlichen Platz an den Seiten zu füllen, könnten Sie einen Verlauf, clevere Schatten oder einige Bilder verwenden, um den leeren Raum zu "füllen". Meine Website ist maximal 960 Pixel breit, sodass sie auf 1600 Pixel breiten Monitoren, 1900 Pixel breiten Monitoren und darüber hinaus gleich aussieht. Ein Ratschlag: Wenn Sie für große Bildschirme gestalten, ist das Testen oder tatsächliche Gestalten für einen großen Bildschirm sehr hilfreich – es ist schwierig, sich einen großen Bildschirm vorzustellen, wenn Sie an einem 13-Zoll-Laptop arbeiten.
Hallo, ich habe eine Frage zum iPad Hochformatmodus…
Sie haben min-device-width:768px und max-device-width:1024px und Ausrichtung Hochformat angegeben und dieselben Werte auch für Querformat. Wenn man das iPad im Hochformat betrachtet, wird die max-device-width 768px sein, oder? Wie kann die max-device-width 1024px sein?
Gibt es einen korrekten Meta-Tag dazu? Ich versuche, die Bildschirmbreiten des iPhone4 und darunter anzusprechen (und nicht die Bildschirmbreiten des iPad2 und darüber). Aber das funktioniert nicht einmal für iPhone4s..
Dies ist ein informativer Artikel, jedoch würde ich responsives Design ähnlich angehen, wie wir es derzeit für vollflüssige Layouts tun. Mein persönlicher Ansatz ist semi-fluid und responsives Design dient nur zur Verbesserung des Inhalts.
Wenn wir zum Beispiel eine feste Breite auf den Container (div als der semantischste Selektor) anwenden, können wir diesen einfach durch Anwenden einer maximalen Breite, einer minimalen Breite und auto für die Abwärtskompatibilität ansprechen. Dies wird natürlich für semi-moderne Browser funktionieren, dies ist meiner Meinung nach die beste Option. Wir können dies basierend auf einem Prozentsatz skalieren und die Breitenbeschränkungen ändern, und schon haben wir ein komplett flüssiges und responsives Design.
Andere Elemente müssen natürlich mit Media Queries spezifisch gestylt, neu angeordnet oder manchmal ausgeblendet werden (was ich nicht empfehlen würde).
Hallo,
Ich arbeite an einer Website, um sie responsive zu machen.
1) Mobiltelefone einschließlich iPhone-Serie verwenden eine CSS-Datei (enthält Hoch- und Querformat-Layouts mit @media),
2) Tablets & iPads verwenden eine CSS-Datei (enthält Hoch- und Querformat-Layouts mit @media),
3) und Desktop-Version CSS (die für große, mittlere und kleine Breakpoints mit @media getrennt ist).
Gibt es eine Möglichkeit, die komplette Problemlösung so zu erreichen?
Ich weiß, dass ich hier vielleicht falsch liege, da ich ganz neu darin bin.. Bitte helft mir.
Vielen Dank im Voraus
Chris
CSS-Tricks rettet mir wieder einmal den Tag! Danke!
Was ist die beste Lösung für die Unterstützung von Media Queries in IE8 oder älteren Browsern?
Ihr Text zum Link hier… – ist ein Polyfill für die Verwendung von Media Queries mit IE 8 und darunter.
Hallo, was ist mit neuen Smartphones mit hoher Auflösung, wie zum Beispiel dem Sony Xperia Z?
Seine Auflösung beträgt 1920 × 1080, das wird ein Problem sein, oder?
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) and (orientation : landscape) { }
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1080px) and (orientation : portrait) { }
Das ist eine nützliche Information über responsives Webdesign!
W3schools.com hat echte Media Queries vergessen!
Vielen Dank für diesen Leitfaden. Ich versuche herauszufinden, warum Sie die Ausrichtung für das iPad, aber nicht für das Smartphone angegeben haben.
Sollten die Media Queries für Smartphones nicht so aussehen
Statt
Es scheint, dass Sie die Ausrichtung in diesen Smartphone-Media-Queries weggelassen, aber für das iPad angegeben haben? Wird die Ausrichtung für Telefone oder nur Tablets benötigt?
Vielen Dank,
John
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
Toller Artikel, Mann, ja, es ist drei Jahre her, dass der Artikel erstellt wurde, aber ich finde ihn immer noch nützlich :)
Ich habe diese Media Queries jetzt schon ein paar Mal verwendet und bin sehr dankbar, dass diese großartige Ressource verfügbar ist.
Ich wollte nur mitteilen, dass es mir geholfen hat, einige Stilprobleme zu lösen, indem ich die Hoch- und Querformat-Media-Queries für Smartphones vertauscht habe, so dass für die Smartphone-Media-Queries Folgendes galt
Smartphones (Hoch- und Querformat)….
Smartphones (Hochformat)….
Smartphones (Querformat)….
Dies half, einige der Stilüberschreibungen auf einigen Telefonen zu verhindern.
iPad und alles andere schien einwandfrei zu funktionieren, wie sie sind.
Okay, ignoriert einfach meinen obigen Kommentar zum Vertauschen der Media Queries. Ich habe gerade eine fehlende } bemerkt, die dazu führte, dass die nachfolgenden Stile nicht funktionierten. Mist! Hätte ich das nur gesehen!
Das ist einfach eine verdammt gute Ressource, auf die man stößt!
Nochmal vielen Dank, CSS-Tricks, ihr produziert weiterhin Qualitätsarbeit, die ich täglich nutze!
Hallo, ich habe gerade diesen Schnipsel ausprobiert, irgendwie funktioniert er bei mir nicht. Er setzt das richtige CSS nicht basierend auf dem Gerät oder wenn ich den Bildschirm in meinem Browser ändere. Unten ist also, was bei mir funktioniert. Es erlaubt mir, CSS sowohl auf Telefonen als auch auf Desktops mit kleiner / angepasster Bildschirmgröße anzuwenden.
Kann die Gerätebreite im Browser getestet werden?
Al,
Ich weiß, das ist vielleicht nicht die Antwort, nach der Sie gesucht haben, aber warum brauchen Sie "device-width"? Haben Sie einen bestimmten Grund, es zu verwenden? Ich baue meine Websites normalerweise mit Min/Max width, die ich mit SASS-Breakpoints codiere, und wenn ich in Produktion gehe, lasse ich sie so. Die einzige Möglichkeit, wie ich mir vorstellen könnte, ein "device-width"-Tag zu verwenden, wäre für eine Art mobile App auf HTML-Basis.
Mit Min/Max-Breite ermöglichen Sie auch neue Geräte, wie sie entstehen, unabhängig von den Geräteabmessungen. Ich entwickle gerne für alle Größen – das bedeutet, dass ich, wenn ich Breakpoints verwende, meine Websites zu 99-100% bei jeder Breite sehen möchte, selbst wenn sie zwischen normalen Gerätebreiten liegt. Mit Min/Max-Breite können Sie dies testen, indem Sie Ihren Browser ziehen.
Mit anderen Worten – es sei denn, Sie können einen Grund nennen, "device-width" zu verwenden, bleiben Sie bei Min/Max-Breite.
Hallo, ich habe ein Problem mit Media Query
Ich habe zwei Media Queries verwendet
1
@media only screen
und (min-width : 768px)
und (max-width : 1024px)
und (orientation : portrait) {}
2.
@media only screen
und (min-device-width : 768px)
und (max-device-width : 1024px)
und (orientation : landscape) {
}
=> Diese Bedingung funktioniert richtig, aber wenn ich das Gerät von Querformat zu Hochformat oder Hochformat zu Querformat drehe, wird die Bedingung ohne Seitenaktualisierung nicht übernommen…
Fügen Sie
<meta name="viewport" content="width=device-width">in den Head ein.Spezifischer Stil für spezifische Abfrage, warum funktioniert es nicht ohne wichtig?
zum Beispiel
@media only screen and (max-width: 320px) {.class1 { width:100%;} }
@media only screen and (max-width: 480px) {.class1 { width:60%;} }
@media only screen and (max-width: 768px) {.class1 { width:80%;} }
Ich habe diesen Code noch nicht ausprobiert, aber weiß jemand, ob er funktioniert?
Hallo Patrick und Frank – angesichts der sich entwickelnden mobilen Plattformen sind feste Breiten weniger flexibel als prozentuale Einstellungen – daher kann das Beschreiben einer festen Dimension jetzt eine ANDERE Plattform in der Zukunft beeinträchtigen. Und Ihnen mehr Arbeit machen.
Daher ist eine %-Dimension besser als eine px-Einstellung.
Viel Glück!
Hallo zusammen,
Bitte geben Sie die Bildschirmbreite für das Nook Color Gerät an
Mit bestem Dank im Voraus,
K. Nagarajan
Funktioniert das auch mit 5 Jahre alten Handys?
Während ich zuvor vorgefertigte Lösungen für responsive Web-Apps angepasst habe, sind 2013/2014 für mich beruflich die Jahre des Aufbaus von responsivem Markup von Grund auf für SharePoint 2010 und 2013. Ich habe diese @media-Abfragen mit großartigen Ergebnissen verwendet. Sie funktionieren auf nahezu JEDEM mobilen Gerät, vorausgesetzt, die Viewport-Auflösung des Geräts passt zu diesen Parametern. Mit diesen Abfragen können Sie Inhaltscontainer (Divs und dergleichen) ausblenden/anzeigen, um Ihren Benutzern unterschiedliche Erlebnisse zu bieten, basierend auf dem Gerät, mit dem sie auf Ihre Web-App zugreifen.
Ich bin SEHR beeindruckt vom responsiven Design dieser Seite, nicht nur wie sich die Inhaltsbreiten ändern, sondern auch von der Aufmerksamkeit, die ihr Jungs JEDEM Teil der Benutzeroberfläche gewidmet habt, besonders der Navigation und dem Banner. Wirklich beeindruckend, CSS-Tricks, ich abonniere und freue mich darauf, viel zu lernen. Tolle Arbeit.
Dieses Tutorial ist wirklich gut, aber warum funktionieren diese Media Queries nicht in IE9? Gibt es einen speziellen Code, um das zu beheben…………
funktioniert perfekt in IE9. Versuchen Sie, dies zum Head-Abschnitt hinzuzufügen.
Was ist also mit neuen, größeren Smartphones, verwenden wir immer noch max-width: 480px? Aber ihre Auflösung ist jetzt viel größer, mit iPhone 4S 960px und dem neuesten Nexus viel höher – bedeutet das, dass Benutzer auf diesen Geräten die Desktop-Version der Website sehen werden? Ich bin etwas verwirrt
Eine sehr informative Seite, auf die ich mich immer wieder beziehe, vielen Dank!
min-width, min-device-width, max-width, max-device-width, min-height, min-device-height, max-height, max-device-height sind alle unterschiedlich.
Wenn Sie min-device-width oder max-device-width verwenden, stellen Sie sicher, dass Sie auch min-width und max-width definieren (dasselbe gilt, wenn Sie auf die Höhe abzielen, und ja, das Anzielen von Höhen funktioniert).
Verwenden Sie außerdem mindestens dies in Ihrem Head-Abschnitt,
aber vorzugsweise diesWenn Sie nur @media only screen and (min-width: NNNpx) und kein max verwenden, erwarten Sie Probleme, aber sie sind lösbar … versuchen Sie, Ihren Code in Architektur (Abmessungen und Größen) und Design (Farben und Bilder) aufzuteilen und separate Dateien zu haben … Architekturdateien sollten min/max Start- und Stopppunkte definieren, während min- Designelementtransformationen nach oben (oder unten, je nachdem, ob Sie Mobile First starten oder nicht) tragen kann.
min-width, min-device-width, max-width, max-device-width, min-height, min-device-height, max-height, max-device-height sind alle unterschiedlich.
Wenn Sie min-device-width oder max-device-width verwenden, stellen Sie sicher, dass Sie auch min-width und max-width definieren (dasselbe gilt, wenn Sie auf die Höhe abzielen, und ja, das Anzielen von Höhen funktioniert).
Verwenden Sie außerdem mindestens dies in Ihrem Head-Abschnitt, aber vorzugsweise dies
Wenn Sie nur @media only screen and (min-width: NNNpx) und kein max verwenden, erwarten Sie Probleme, aber sie sind lösbar … versuchen Sie, Ihren Code in Architektur (Abmessungen und Größen) und Design (Farben und Bilder) aufzuteilen und separate Dateien zu haben … Architekturdateien sollten min/max Start- und Stopppunkte definieren, während min- Designelementtransformationen nach oben (oder unten, je nachdem, ob Sie Mobile First starten oder nicht) tragen kann.
scheint ein Problem beim Akzeptieren von Code zu sein …
Verwenden Sie außerdem mindestens dies in Ihrem Head-Abschnitt <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> aber vorzugsweise dies <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi”>
Hallo,
Ich muss dieses CSS nur in meinen Stil einfügen und das war's?
Ja, und fügen Sie natürlich Stile hinzu. Nur für den Fall, dass Sie es nicht wissen, müssen Sie auch ein Viewport-Meta-Tag in Ihre HTML-Datei einfügen.
Ihre Website ist sehr hilfreich. Wenn ich ein Problem im Webdesign habe, schaue ich mir Ihre Ideen an, und sie sind fast perfekt.
Vielen Dank, Mann.
Danke GOTT, dass wir jemanden wie DICH haben.
Hallo, meine Website ist nicht responsiv. Ich verwende Joomla 3.3.0, wie kann ich sie responsiv machen, so dass sie, wenn sie auf einem mobilen Gerät geöffnet wird, auf die Bildschirmgröße passt und keine Bilder verschiebt oder durcheinanderbringt, sondern genau so aussieht, wie sie im Desktop-Browser ist. Kann mir jemand helfen?
Ich habe es gefunden, ich entferne einfach das width=device-width im Meta-Tag in index.php und voilà! Meine Website passt ohne @media-Tags auf den Bildschirm!
Genau das, wonach ich gesucht habe, vielen Dank! Ich entwickle einen abgefahrenen Kalender, der auf dem Handy einfach nicht funktionieren will… Nun, noch nicht jedenfalls! ;)
Funky Kalender für ein Handy, fügen Sie einfach dies hinzu, um das Öffnen der Tastatur zu verhindern.
Hallo,
Zielt die iPad-Abfrage (Hochformat) nur auf Hochformat ab?
oder sollte es sein
@media only screen
und (min-device-width : 768px)
und (max-device-height : 1024px) {
/* Stile */
}
Ich habe dies in eine schnelle Website eingebaut, also dachte ich, ich teile es. Sehr einfach, ändert Farbe und Inhalt, wenn der Bildschirm angepasst wird. http://demo.slickdesign.com.au/responsive-template/
Lassen Sie mich meine @media-Abfragen teilen. Ich verwende dieses Schema in meinem eigenen WordPress-Theme, und im Moment funktioniert es sehr gut. Was halten Sie davon?
@media only screen
und (max-width : 1024px) { }
@media only screen
und (min-width : 769px)
und (max-width : 1024px) { }
@media only screen
und (max-width : 768px) { }
@media only screen
und (min-width : 481px)
und (max-width : 768px) { }
@media only screen
und (max-width : 480px) { }
@media only screen
und (min-width : 321px)
und (max-width : 480px) { }
@media only screen
und (max-width : 320px) { }
Es ist wichtig, sich daran zu erinnern, dass max-width und min-width den referenzierten Pixel einschließen. Zum Beispiel schließt min-width: 768px die 768px-Position ein, dasselbe geschieht mit max-width: 768px. Es wird zweimal verwendet, und wir haben weniger Kontrolle. In diesen Fällen ist es besser, dem min-width einen Pixel mehr hinzuzufügen; zum Beispiel min-width: 769px.
Schema
= 769, <= 1024
= 481, <= 768
= 321, <= 480
<= 320
Vielen Dank Gerard! Das war wirklich hilfreich.
Vielen Dank Gerad für das Teilen des Codes. Es ist praktisch.
Ja, das ist entscheidend, wenn Sie bestimmte Elemente mit CSS ein- und ausblenden. Ich würde "-device-" nicht verwenden, da es beim Ändern der Browsergröße schrecklich aussehen würde. Nur als Info. Ich verwende "-device-" nie, ich sehe keinen Sinn darin, da alle Geräte in die oben von Gerard geposteten @media-Queries fallen werden. Bewahren Sie diese in Ihren Dateien auf und vielen Dank für das Teilen.
Hallo… Haben Sie das irgendwo online gepostet, wo ich es schnell finden kann, bitte?? Ich suche einen Online-Leitfaden, den ich als Referenz für aktuelle und zukünftige Projekte verwenden kann, da dieser hier veraltet zu sein scheint. Vielen Dank im Voraus für Ihre Antwort.
Hallo,
Ich frage mich, warum so viele verschiedene Pixelsätze von verschiedenen Media Queries existieren, um irgendwie jede potenzielle Bildschirmauflösung abzudecken. Was wird passieren, wenn in vielleicht einem Jahr eine komplett andere Auflösung aufgrund neuer Hardware erforderlich sein wird? Gibt es nicht eine Möglichkeit, flexibler zu sein und mit Bildschirmproportionen basierend auf der tatsächlichen Schriftgröße zu arbeiten... z.B. mit dem Attribut "em"?
Ich verwende @media only screen and (max-width: 768px) usw. in meiner CSS-Datei, aber ich möchte, dass Bilder auf meinen Haupt-HTML-Seiten je nach Bildschirmgröße angezeigt oder nicht angezeigt werden. Wie steuere ich das? Haben Sie das schon einmal gemacht? Ich möchte einfach ein anderes Bild einfügen, wenn die Bildschirmgröße kleiner als 1024px ist.
Hallo Leute,
hier könnt ihr Folgendes für Geräte verwenden
@media query only screen and (max-device-width: 480px){
/*Ihre Stile für ein 480px Gerät*/
}
Hallo
Mein Problem ist, dass, wenn ich @media (max-width: 320px) verwende, die Seite einwandfrei funktioniert. Aber darunter. Wenn ich Code für @media (max-width: 800px) schreibe, dann funktioniert 320 nicht, nur @media (max-width: 800px) funktioniert einwandfrei ,,,, kurz gesagt, beides funktioniert nicht gleichzeitig
Kann jemand antworten?
werde warten :)
Hey Chris, vielen Dank für deine nützliche Arbeit!
Wirst du diesen Beitrag in naher Zukunft aktualisieren?
Tschüss
Muhammad,
Verwenden Sie das Wort "and" zwischen den verschiedenen Bedingungen
Beispiele
@media (min-width: 321px) and (max-width: 800px) {}
@media (max-width:320px) {}
Können Sie mir bitte die Media Query für das iPad Mini nennen? Die Media Query für das iPad funktioniert nicht für das iPad Mini. Bitte helfen Sie mir dabei.
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){
}
Sie haben Recht, aber mein Problem ist ein responsives Medium in der Übersicht für Tablet und iPhone, bei der Verwendung Ihrer Medienabfrage fehlt die Cleverness.
Hallo,
Ich versuche viele Media Queries, aber meine Website wird auf dem Samsung Galaxy S3 nicht im responsiven Stil angezeigt, auf allen anderen Geräten öffnet sich die Website im responsiven Stil.
Kann mir jemand die richtige Methode und die richtige Media Query für das Samsung Galaxy S3 nennen?
Funktioniert das?
http://nmsdvid.com/snippets/#
Wie gehen Entwickler von responsivem Design mit Telefonen um, die mehr Pixelbreite haben als alte Telefone? Zum Beispiel hat mein Mobiltelefon (ZTE Warp Sync) die Abmessungen 1280 x 720 Pixel (nicht die winzigen 340px, die ich in Tutorials und Beispielcodes gesehen habe) mit einer Pixeldichte von 293,72. Weder 1280 (Querformat) noch 720 (Hochformat) werden in den von mir gesehenen Media Queries als Telefonbreite betrachtet. Ein Teil dieses Codes würde eine von mir erstellte Website wie einen Desktop rendern und nicht wie ein Telefon, es sei denn, ich übersehe etwas.
Wie man ein responsives Template Schritt für Schritt schreibt Tutorial
hi
Mein Code funktioniert nicht @media (max-width:320px) {}
Hallo Leute.
Ich möchte ein bestimmtes Gerät mit einem bestimmten Browser ansprechen.
Wie mache ich das? Verschachtel ich die Media Queries?
Beispiel
Das Gerät ist in den Bildschirmparametern verschachtelt.
Entschuldigen Sie den Code, aber Sie verstehen, was ich meine.
Oder verwende ich
Bisher hatte ich mit beidem kein Glück.
Jede Hilfe wird geschätzt.
Vielen Dank,
Michael
Es scheint mir, dass ich die ganze Zeit den Haltepunkt falsch gesetzt habe
@media(max-width:768px)
@media(min-width:768px)
Ich dachte, das wäre der richtige Weg. Ich hatte viele Probleme mit Geräten mit einer Breite von 768px. Jetzt weiß ich warum :|
Halte es einfach
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
RE zu John Geromes Post: Halte es einfach.
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
Dieser Ansatz gefällt mir – danke.
Frage: Wenn ich absolut alles in ems (d.h. alle Elemente, Text usw.) und das Layout in % (oder sollte dies auch ems sein?) setze – können Sie einen einfachen Vorschlag für die minimale Anzahl der zu verwendenden Media Queries und die em-Werte geben.
Hallo,
Ich habe eine kleine Frage. Ich habe dies in meinen HTML-Code geschrieben
Das ist nur ein Beispiel. Mein Problem ist, dass, wenn ich ein anderes alternatives Stylesheet mit demselben Code wie in diesem Kommentar schreibe, die Stylesheets die anderen nicht überschreiben, wenn ich die Browserbreite oder -höhe ändere. Ist das der Fehler: …(min-width: 0px, max-width: 800px)“ ?
Muss ich den Code so schreiben: …(min-width: 0px) und (max-width: 800px) ?
Ich hoffe, mein Englisch ist gut genug, um mich zu verstehen.
Ich würde mich über eine Antwort freuen.
Vielen Dank
Hallo, ich verwende (landscape und portrait) für die Bildschirmgröße (1024x768). Aber wenn ich diese Methode für die Bildschirmgröße (736x414) verwende, funktioniert sie nicht. Irgendwelche Vorschläge? Und bitte sagen Sie mir auch, ob diese Methode im Desktop-Browser sichtbar ist?
Hallo! Funktioniert dieser Code auch mit dem Mini-iPad?
/* iPads (portrait) ———– /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/ Styles */
}
wenn nicht, brauche ich es, vielen Dank.
Vielen Dank, es funktioniert einwandfrei.
Ich verwende das Responsive Theme. Was ist, wenn ich meine Untermenüpunkte auf dem Desktop ausblenden, aber auf dem Handy anzeigen möchte? Ich verwende das Plugin "Responsive Menu" für Mobilgeräte, das dort eine schöne Slider-Erweiterung/Reduzierung für Menüs bietet. Aber auf dem Desktop möchte ich keine Untermenüs anzeigen. Die Hauptmenüpunkte (z. B. Über uns) führen Sie zu diesem Abschnitt/dieser Seite der Website, wo dann eine Seitenleistennavigation von diesem Punkt an für alle zugehörigen Seiten verwendet wird.
Danke dafür. Wirklich hilfreich. :)
Und warum gibt es keine Windows Phone Geräte?
Chris ist ein Superstar unter den CSS-Profis, aber auch ein sehr netter Kerl. Ich habe ihm ein paar Mal eine E-Mail geschickt und er hat mir immer geantwortet. Ich spreche Ihnen und Paul Irish viel Lob aus.
In der vorherigen Version dieses Artikels hat Chris alles in einem großen Abschnitt zusammengefasst. Das war sehr hilfreich. Ich habe unten dasselbe gemacht…
http://codepen.io/anon/pen/LEoRNz.css
Danke für die aktualisierten Abfragen, sie funktionieren super.
Und warum gibt es keine Windows Phone Geräte?
Hallo,
Ich habe eine allgemeine Frage zu Media Queries.
Ist es möglich, einzelne Bildschirmgrößen anzusprechen, anstatt min-width und max-width usw. zu verwenden…
Ich möchte mit den Laptop-Größen beginnen
1024 x 768
bis zu
1920 x 1080
Dann arbeite ich mich schließlich zu mobilen Geräten vor, aber es fiel mir besonders schwer, auf diese Weise zu zielen. Ich habe viele Wege ausprobiert, aber es scheint einfach so, dass wenn ich zum Beispiel min-width, max-width verwende, ich normalerweise die Stile für mehrere Auflösungen mit nur einer Media Query ändere. Irgendwelche Lösungen dafür? Ich weiß, viele von euch machen das (am Anfang) durch, aber was habt ihr getan, um dieses Problem zu lösen? Irgendwelche Tipps und/oder Vorschläge?
Vielen Dank
Brian
Hallo.
Ich habe zwei Div-Container für Speisekartenelemente. Einer heißt menu-container und ist eine Klasse, der andere ist mobile-menu und ist eine ID. Ich möchte nur .menu-container auf dem Desktop und nur #mobile-menu auf Telefon und Tablet anzeigen. Ich habe die max-width auf 1047 und die min-width auf 1048 eingestellt. Wenn ich es mobil anschaue, sieht alles toll aus und funktioniert, aber wenn ich es auf dem Desktop anschaue, werden beide Menüs angezeigt.
Das hat mich verrückt gemacht und ich bin mir nicht sicher, wie ich dieses Problem lösen soll.
Vielen Dank,
Carlie
Diese Media Queries scheinen auf iOS 8.3 (ältere Betriebssysteme habe ich nicht getestet) nicht zu funktionieren. Es sei denn, ich übersehe etwas. Zum Beispiel hier ein einfacher Test. Für iPhone4/4s sollte der Hintergrund rot sein. Für alles Größere sollte er blau sein.
Aber es ist am Ende rot für iPhone5/5s, iPhone6, iPhone6Plus. Es ist blau für iPadAir, iPad Retina, Desktop.
Wie bekomme ich es nur für iPhone4/4S zum Laufen? (im Grunde kürzere Bildschirme)
Ich habe die 4 Standard-Media-Queries mit Bootstrap geschrieben. Es ist in Ordnung.
Aber es ist nicht in Ordnung in Pixeln zwischen den Media Queries, weil ich Padding oder Margin verwendet habe.
Wie kann ich dieses Problem lösen und gibt es viele andere Media Queries?
Hallo, ich möchte jetzt Media Query für die Breite und Höhe im Quer- und Hochformat wissen.
Das ist wirklich gut!!
Vielen Dank für den Beitrag. Das ist eine großartige Ressource!
Ist es möglich, eine bestimmte Bildschirmbreite UND -höhe anzusprechen? Zum Beispiel haben wir eine Touchscreen-Kiosk-/Web-App entwickelt, die nichts anderes als eine responsive Website ist, die auf eine bestimmte Touchscreen-Monitorbreite und die üblichen mobilen Größen zugeschnitten ist. Das Problem besteht darin, dass die "Überlagerung" von Zielgrößen über min- und max-widths eine Layout-Korrektur auf dem Touchscreen dazu führt, dass das Layout auf mobilen Geräten fehlerhaft wird. Wenn es eine Möglichkeit gäbe, eine bestimmte Breite MIT einer bestimmten Höhe anzusprechen, könnte das unser Problem lösen.
Jede Hilfe wäre sehr dankbar!
Es scheint, dass die beste Idee ist, die breiteste Hochformatansicht der Mobiltelefone zu wählen und einfach ALLE Designs für mobile Geräte in Hochformat bei dieser Größe beginnen zu lassen. Anstatt Spalten und Ähnliches bei 480px zu kollabieren, macht man es stattdessen bei 736px Breite wegen des iPhone 6.
Das ist das Einfachste.
Aber gibt es nicht etwas viel Einfacheres, das Zurb Foundation macht? Und was ist mit device-aspect-ratio anstelle von Pixeln?
Mann, ich habe Schwierigkeiten mit diesen Media Queries. Ich habe ein Tutorial befolgt, wie man eine Navigationsleiste erstellt. Ich habe meine Navigationsleiste nach dem Tutorial gebaut. Sie ist etwas anders. Ich habe nur die grundlegende Idee aus dem Tutorial übernommen. Jedenfalls, das ist mein Problem: Wenn der Bildschirm kleiner ist, ändert sich die Navigationsleiste. Man kann die Navigationsleiste anklicken. Sie öffnet eine vertikale Navigationsleiste (ich nenne das ein Mini-Menü). Während das Mini-Menü geöffnet ist, wenn man den Browser in der Größe ändert und ihn größer als 840 Pixel macht, ist die alte Navigationsleiste falsch platziert. Sie können sehen, wovon ich spreche, auf meiner Website. http://JetBBS.com/test2.html. Haben Sie Ideen, wie ich das beheben kann? Ich habe so ziemlich alles versucht, was mir einfiel! Ich glaube, ich muss etwas im jQuery-Code (http://JetBBS.com/js/click.js) tun, aber ich bin mir nicht sicher, was. jQuery ist nicht meine Stärke. Danke!
Ich möchte den Unterschied zwischen Media Query und Breakpoints wissen, gibt es einen Unterschied zwischen beiden,
wenn ja, dann bitte antworten…
Vielen Dank.
Gibt es einen bestimmten Grund, warum "screen" das Ziel ist und nicht "all" wie in
@media all and (min-width: 768px) {}
Entschuldigung, aber kann jemand erklären, wie und wann dieser Artikel hilfreich ist.
Beispiel
Die Abfrage im Abschnitt iPhone 4 und 4S (unten kopiert/eingefügt) wird viel mehr Geräte als nur iPhone 4 und 4S betreffen.
/* ———– iPhone 4 und 4S ———– /
/ Hoch- und Querformat */
@media only screen
und (min-device-width: 320px)
und (max-device-width: 480px)
und (-webkit-min-device-pixel-ratio: 2) {}
Es wird zum Beispiel
iPhone 5
iPod Touch
LG Optimus G
Samsung Galaxy Note
Samsung Galaxy Note 2
Samsung Galaxy S5
Samsung Galaxy S3
Samsung Galaxy Nexus
LG Nexus 4
Microsoft Lumia 830
Sony Xperia S
..und viele, viele weitere Geräte betreffen. Wozu dient es also, dies als „iPhone 4 und 4S“ zu spezifizieren?
Noch etwas. In der Abfrage — wie verhält sich (max-device-width: 480px) zu iPhone 4 und 4S, obwohl die device-width für diese beiden Geräte 320px beträgt?
Ich denke, was der Entwickler zeigte, waren die Media Queries für die verschiedenen iPhone-Sachen. Ja, es würde mit anderen Geräten funktionieren, aber es funktioniert definitiv mit dem iPhone 4 und 4S. Ich glaube, deshalb hat er es unter dem iPhone-Abschnitt gruppiert. Sie sagen im Grunde: Hey, das ist die Media Query für iPhone 4 und 4S. Andere Telefone, die die gleiche Auflösung verwenden, werden ebenfalls einbezogen, aber wenn Sie nach dem Code zur Unterstützung von iPhone 4 und 4S suchen, hier ist er.
Für iPhone 4 und 4s beträgt die maximale Gerätebreite 480px, was für den Querformatmodus gilt.
Für iPhone 4 und 4s wäre die device-width im Querformat wahrscheinlich 480px — aber nur, wenn diese beiden Geräte Android-Telefone wären.
Die Device-Width funktioniert auf IOS und Android unterschiedlich. Für Android sind es (normalerweise/nicht immer) zwei (2) Device-Width. Eine für die kurze Seite im Hochformat und die andere für die lange Seite im Querformat.
In IOS gibt es jedoch nur eine (1) Device-Width. Es ist die kürzere Seite, egal welche Ausrichtung. Tatsächlich beträgt die Device-Width für das iPhone 4 und 4s 320px — auch im Querformat.
Ein weiteres Problem ist, dass verschiedene Browser unterschiedlich auf die Device-Width reagieren. Beispiel: Der Standard-Android-Browser und Dolphin (aber nicht Chrome, Opera, Firefox) verwenden physische Werte und nicht CSS-Pixel, was die Norm ist.
All dies zusammen bedeutet, dass die Verwendung der Device-Width für das Seitenlayout nicht sehr weit von der Verwendung von Zufallszahlen entfernt ist :|
Coole Sache,
Was ist mit den größeren Bildschirmen, die 1244px überschreiten, wie 1824px….
Können wir verwenden
@media screen
und (min-device-width: 1800px)
und (max-device-width: 2200px)
und (-webkit-min-device-pixel-ratio: 1) {
}
Grandios! :-D
Ich bin sehr glücklich. Vielen Dank.
Ich bin überhaupt kein Entwickler, versuche es aber – vielen Dank an alle, die hier gepostet haben. Es hat mir geholfen. Kann mir jemand sagen, warum in diesem Code zwei Anzeigen zurückgegeben werden? Oder wie ich es korrigieren muss? Sehr dankbar.
.adslot_1 { width: 300px; height: 250px; }
@media (min-width:300px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:500px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:600px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:800px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:900px) { .adslot_1 { width: 300px; height: 250px; } }
@media (min-width:1024px) { .adslot_1 { width: 300px; height: 250px; } }
<script async src=”https://#/pagead/js/adsbygoogle.js””>
(adsbygoogle = window.adsbygoogle || []).push({});
var resizeTimer;
function resizer() {
googletag.pubads().refresh([window.Leaderslot]);
}
window.addEventListener(“resize”, function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizer, 250);
});
Ich denke, das ist der bessere Weg, meine vorherige Frage zu stellen. Entschuldigung.
Ich bin überhaupt kein Entwickler, versuche es aber – vielen Dank an alle, die hier gepostet haben. Es hat mir geholfen. Kann mir jemand sagen, warum in diesem Code zwei Anzeigen zurückgegeben werden? Oder wie ich es korrigieren muss? Sehr dankbar. Den Code sehen Sie hier
http://codepen.io/anon/pen/EVPaZJ
Ich habe all dies in LESS Mixins umgewandelt – viel Spaß: https://github.com/aliencreations/responsiveless
Wenn jemand Zweifel an Fenstergrößen usw. hat… Platzieren Sie diesen JavaScript-Alert, um alle Informationen über Fenstergrößen (Breite und Höhe) und das Geräte-Pixelverhältnis zu erhalten, um Ihre Media Queries besser entwickeln zu können. Vielen Dank
JavaScript Code
alert(
“Geräte-Pixelverhältnis: ” + window.devicePixelRatio +
“\nGerätebreite: ” + window.innerWidth +
“\nGerätehöhe: ” + window.innerHeight
);
*HINWEIS: „\n“ entspricht einem Zeilenumbruch, übrigens :)
Es gibt doppelte Abfragen für iPad Mini und iPad 1-2, was etwas verwirrend ist.
Ich erstelle eine Website, weiß aber nicht, welche Pixelwerte ich in mein CSS einfügen soll. Was wären Ihrer Meinung nach die drei grundlegendsten Breitenbereiche?
Zum Beispiel:
Hey Chip
Ersparen Sie sich viel Ärger – verwenden Sie nicht die Gerätebreite. Das ist Zeitverschwendung. Warum? Weil verschiedene Geräte unterschiedlich „berichten“. Das bedeutet, das Ergebnis wird zufällig und somit nutzlos sein.
Ich habe mehrere Tests mit vielen Geräten durchgeführt. Wenn die Leute nur iPads und iPhones verwenden würden – es würde funktionieren. Auf der Android-Seite ist es jedoch inkonsistent. Sie können also nicht kontrollieren, was Sie kontrollieren möchten.
(Weitere Details dazu können Sie etwa 7 Beiträge weiter oben lesen)
Beste Grüße
Die Verwendung gerätespezifischer Viewports ist nicht sehr zukunftsorientiert. Ich stimme den Ideen in diesem Artikel zu
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
Ich möchte nur wissen, wie ich Media Queries einrichte, damit sie mit den meisten Geräten funktionieren. Gerätespezifisch ist nicht der Weg, den ich gehen möchte, da es eine wahnsinnige Anzahl von Geräten gibt, aber ich möchte trotzdem die grundlegenden Media Query Breakpoints kennen, die ich verwenden sollte, und Best Practices dafür. Irgendwelche Tipps?
Super... genau das, wonach ich gesucht habe.
Was ist der Unterschied zwischen min-width und min-device-width?
Webdesign-Training
Ich benötige Media Query für Windows Microsoft/Nokia Lumia 520 und höher.
Bitte helfen Sie mir.
Sind die Anfragen aktualisiert?
Post sagt, es wurde seit 2010 nicht mehr aktualisiert…
Großartig! Das hat mir sehr geholfen.
Wow, Ihr Tutorial ist großartig, um den Begriff "Media" für Mobilgeräte besser zu verstehen. Das ist meine responsive Gestaltung für meine beiden Seiten:
/* MENÜ */
@media (max-width: 820px) {
#tel-mobile {
font-size:30px;
line-height:20px;
font-weight: bold;
color : white;
width:110%;
margin-top:20px;
}
#title-header-mobile{
font-size:20px;
line-height:40px;
font-weight: bold;
color : white;
}
}
.menu-responsive-titre li{
font-size:17px;
font-family:’font-h2′;
text-align:center;
}
@media (min-width: 820px)
{
.haut_bloc_responsive {
display:none;
}
}
http://plombier-sos.com/ und http://serrurier-paris-urgent.com/
Wenn Sie etwas in meinem CSS-Code verbessern können, lassen Sie es mich bitte wissen, vielen Dank und fühlen Sie sich frei, diesen Code zu verbessern
Es ist sehr cool, wie Sie jedes einzelne Gerät auflisten. Obwohl es sehr nützlich ist, kann es auch sehr entmutigend und überwältigend sein.
Normalerweise verwende ich 4 Bereiche für meine Seite, das ist es….
1) kleinstes für Wearables,
2) kleiner für Mobiltelefone,
3) mittel für Tablets, und
4) groß bis maximal für Laptops und Desktops.
Nochmals vielen Dank für die detaillierte Liste. Das ist viel Arbeit, und ich verneige mich vor Ihnen, Sir. Nochmals vielen Dank für die großartigen Arbeiten auf dieser Website. Ich habe viel von dieser Website gelernt.
http://eighttech.com/projects/8com/vpage.html
Bitte geben Sie Probleme in dieser URL an
Ich habe einige Probleme mit dem iPhone und besitze kein iPhone-Gerät
Bitte helft…
Hallo,
Sie haben eine falsche Gerätebreite für Nexus 7, sie beträgt 960px, nicht 906px.
Können Sie bitte erklären, warum Sie eine Media Query wie diese verwendet haben? @media (max-width: 48.75em)
Hallo,
Ich möchte wissen, wie viele Arten von Mediengrößen es gibt.
Bitte helft mir, irgendjemand!!!!!!!!
Ich habe eine Minibibliothek darüber geschrieben, ich hoffe, ich werde sie weiterentwickeln, schauen Sie mal
Im obigen Beitrag sehe ich das CSS-Skript bis zum iPhone 4 bis iPhone 6/6 Plus. Ich freue mich auf die Auflösung (Min- und Max-Größe) für IPHONE 7 & 7 plus. Können Sie die Details bitte teilen?
/* ———– iPhone 6+ ———– */
/* Hoch- und Querformat */
@media only screen
und (min-device-width: 414px)
und (max-device-width: 736px)
und (-webkit-min-device-pixel-ratio: 3) {
}
/* Hochformat */
@media only screen
und (min-device-width: 414px)
und (max-device-width: 736px)
und (-webkit-min-device-pixel-ratio: 3)
und (orientation: portrait) {
}
/* Querformat */
@media only screen
und (min-device-width: 414px)
und (max-device-width: 736px)
und (-webkit-min-device-pixel-ratio: 3)
und (orientation: landscape) {
}
„Wenn Sie denken, responsiv ist einfach, tut es mir leid für Sie, mein Sohn. Wir haben 99 Viewports, aber das iPhone ist nur eines.
—Josh Brewer, 10. März 2010“
Ich liebe dieses Zitat, darf ich es auf meiner Website verwenden?
Die Verwendung von
device-heightunddevice-widthbzw.min/max-device-heightundmin/max-device-widthist laut MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries veraltet und sollte nicht mehr verwendet werden.Es scheint, als ob Sie jetzt wirklich nur Ihre Website so gestalten müssen, dass sie überall gut aussieht, indem Sie einen Desktop-Computer und die Chrome-Webinspektor-Tools verwenden.
Was auch immer mit Retina und anderen Displays mit hoher Pixeldichte passiert, scheint keine Rolle zu spielen, da sie anscheinend ihre höhere Pixelanzahl so anzeigen, als wäre es die gleiche Pixelanzahl wie bei einem normalen Display.
Basierend darauf scheint 768px immer noch ein vernünftiger Breakpoint für Tablets zu sein, und 480px und 320px scheinen vernünftige Breakpoints für Telefone zu sein. Ob diese Abmessungen auf Retina-ähnlichen Displays tatsächlich 1,5x, 2x, 3x oder höher sind, scheint für Media Queries keine Rolle zu spielen.
Leider sind die Chrome Web Inspector Tools nicht vollständig zuverlässig, um iPhone Media Queries für Safari auszuwerten.
Persönliche Meinung natürlich, aber Ihre Website sollte sich wirklich nicht darum kümmern, auf welchem Gerät sie läuft. CSS Media Queries sollten verwendet werden, um das Website-Layout und möglicherweise den visuellen Stil anzupassen, um die bestmögliche Benutzererfahrung für die Bildschirmauflösung (Viewport-Größe) des Geräts zu bieten. Breakpoints, wenn das Ihr Ding ist, können basierend auf der Höhe des Viewports zur Laufzeit (100% HTML-Elementhöhe oder ein davon abgeleiteter calc() usw.) bestimmt werden.
Wenn Sie wirklich gerätespezifische Inhalte bereitstellen müssen, ist die Verwendung von JavaScript oder einem serverseitigen Skript zur Abfrage der User-Agent-String eine Lösung, aber sie ist nicht super zuverlässig, da die User-Agent-String leicht geändert werden kann.
Designen Sie für den Viewport, nicht für das Gerät :)
Sie sagen, man soll keine gerätespezifischen Media Queries verwenden und geben uns dann eine Menge gerätespezifischer Media Queries. Das verwirrt mich ein wenig.
Ich verwende LESS und möchte wissen, wie ich Media Queries zu einer Variablen kombinieren kann, um eine allgemeine "mobile" Media Query zu erstellen (die vom kleinsten gängigen Viewport auf dem Markt bis zum größten gängigen Viewport auf dem Markt reicht)? Irgendwelche Ideen?
Hallo ihr Lieben alle
Wie geht's euch?
Ich habe kürzlich einen Blog gestartet. Ich habe keine guten CSS-Kenntnisse. Deshalb ist die Geschwindigkeit meiner Website sehr langsam. Schlagen Sie mir vor, damit die Geschwindigkeit meiner Website steigt und Google mit der Suche beginnt. Geben Sie CSS-Code für Mobilgeräte, Tablets, Desktops und Laptops an. Ich hoffe aufrichtig, dass Sie mir helfen werden.
Bitte helft
Meine Website
http://www.ohknowledge.com/
Hallo Suil,
Es klingt, als könnten Sie einen Rat gebrauchen. Die Snippets in diesem Beitrag helfen Ihnen, Layouts für bestimmte Geräte anzupassen, aber die Geschwindigkeit hängt letztendlich vom CSS ab, das Sie schreiben, der Komplexität des Designs und vielen anderen Faktoren. Wenn Sie spezielle Fragen haben, stellen Sie diese bitte in unseren Foren – dort gibt es viel großartige Hilfe. :)
Prost!
Ich sehe, dass dies zuletzt am 9. Oktober 2017 aktualisiert wurde. Entschuldigen Sie meine Gier, aber haben Sie ein Update, das Samsung Galaxy S7 und S8 enthält?
Auch ich fange gerade mit diesem Teil des responsiven Designs an (ich verwende bereits Flex-Layout und Rem-Einheiten). Ich weiß diese Seite und ihre gerätespezifischen Inhalte sehr zu schätzen. Für mich ist es wie eine gezogene Seitenwaffe, wenn ich dieses Minenfeld von Geräten betrete. Ich hoffe, ich muss sie nie benutzen, aber ich bin froh, dass sie da ist.
Es ist auch eine gute Möglichkeit, beliebte Geräte zu verstehen und sie dann über allgemeinere Media Queries in Gruppen zusammenzufassen. Es sind nützliche Daten.
Vielen Dank euch allen, dass ihr mir geholfen habt, eine passende Größe für alle Geräte zu finden.
Vorschläge, wenn Sie immer noch zögern, die passende Bildschirmgröße zu bestimmen: Überprüfen Sie zuerst mit Google Analytics, welche Art von Smartphone oder Tablet Ihre Besucher hauptsächlich verwenden. Danach können Sie einige Bildschirmgrößen festlegen, die für Ihre Website geeignet sind.
Ausgezeichneter Beitrag, vielen Dank. Eine Frage: Ich möchte bestimmte Größen/Geräte ansprechen. Ist es besser, ein Stylesheet mit den verschiedenen Breakpoints zu verwenden oder separate Stylesheets speziell für dieses Gerät aufzurufen?
Hallo,
Ihr Beitrag ist sehr gut und sehr hilfreich. Ich bin hierher gekommen, weil ich eine Anregung für mein Projekt hatte.
Ich habe diese Media Queries in meinem Code und bin mir nicht sicher, wie ich sie verbessern kann.
Kumpel, warum verwendest du nicht min-device-width + min-device-height? Ich habe die Media Queries ausprobiert und bin beim iPhoneX steckengeblieben. Habe ein paar Stunden damit verbracht und gemerkt, dass ich mit min-device-height viel bessere Ergebnisse erzielen kann.
Beste Grüße
Sollte dieser Beitrag nicht aktualisiert werden, um
min-resolutionundmax-resolutionzu verwenden?Was ist mit dem 27″ 5K iMac Retina?
Ich möchte eine Seite responsiv gestalten, soll ich zuerst mit der Telefon-Größe beginnen?
Hey
Mir ist aufgefallen, dass das iPad Pro 10.5 dieselbe min-device-width und max-device-width hat. Ist das richtig?
@media only screen
und (min-device-width: 834px)
und (max-device-width: 834px)
und (orientation: portrait)
und (-webkit-min-device-pixel-ratio: 2) {
}
/* Querformat /
/ Denselben Wert für min- und max-width deklarieren, um Kollisionen mit Desktops zu vermeiden /
/ Quelle: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
und (min-device-width: 1112px)
und (max-device-width: 1112px)
und (orientation: landscape)
und (-webkit-min-device-pixel-ratio: 2) {
}
könnten Sie bitte eine Media Query für das iPad Pro 11 Zoll bereitstellen?
Hey Sai! Es ist dabei, unter Tablets/iPad als 10,5″ Modell
Wie macht man eine Website responsiv in mobilen Browsern (außer Chrome, z.B. Vivo Browser)?
Gelten diese Abfragen als Mobile-First-Abfragen?
Nicht ganz. Während Mobile-First eine Strategie ist, die viele Dinge umfasst, würde es bei CSS-Media-Queries bedeuten, dass Basis-Stile für mobile Geräte geschrieben werden und von dort aus Media-Queries verwendet werden, um Stile auf größere Bildschirme anzuwenden. Die Media-Queries hier zielen auf bestimmte Geräte ab, anstatt mobil zu beginnen und dann zu skalieren.
Ein Mobile-First-Ansatz würde etwa so aussehen
Beachten Sie, wie "min-width" verwendet wird. Es ist gleichbedeutend mit "wenden Sie diese Stile ab diesem Punkt an", was die Stile für kleinere Geräte, die ihm vorausgehen, überschreibt. Das ist Mobile-First: klein anfangen, dann skalieren.
Sie sollten irgendwo hier vermerken, dass device-width und device-pixel-ratio jetzt veraltet sind: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features
Dieser Text ist sogar interessant, ich habe nach Informationen zu Gerätegrößen / CSS gesucht und konnte diese Informationen hier finden !! Vielen Dank!
Aber… was ist mit Monitoren? Werdet ihr eine Liste für alle/die meisten Monitorgrößen haben? Wie 21″, 27″, 32″ etc.?
Kann mir jemand sagen, wie ich CSS für iPads 10.5 & 12.9 Versionen umsetzen kann, da das oben angegebene CSS nicht funktioniert?
Ich bin auf dasselbe Problem gestoßen.
Könnten Sie mir mitteilen, mit welcher Telefon-Größe ich zuerst beginnen soll, um die Seite responsiv zu gestalten?
Hallo! Ich würde vorschlagen, alle Ihre Stile so zu schreiben, als wären es mobile Stile. Wenn Sie dann zusätzliche Stile für größere Bildschirme benötigen, verwenden Sie eine Media Query, um diese Stile anzusprechen.
Hier ist ein verallgemeinertes Beispiel
Können Sie die Kommentare zuklappen, damit das Scrollen nicht „ein bisschen = am Telefon vorbeischießen, das ich sehen wollte“ ist? Ich habe bemerkt, dass Sie das Layout aktualisiert haben, was enorm hilft, aber es wäre fantastisch, meinen Wacom-Stift zum Scrollen zu verwenden, ohne zu weinen.
Wir haben kürzlich eine neue Website mit responsivem Design gestartet.
Wir hören jedoch von einigen Benutzern, dass die Website auf einigen Mobilgeräten: HTC, Windows Phones usw. nicht responsiv ist.
Wenn ich in einem Emulator teste, sieht die Website auf den hervorgehobenen Geräten gut aus, aber auf einigen Geräten scheint es immer noch nicht zu funktionieren.
Irgendwelche Ideen?
https://www.servertrafficweb.com/offshore-dedicated-server.html
Überprüfen Sie die Browser, die sie verwenden – Sie testen höchstwahrscheinlich in Chrome.
Vielen Dank für diesen Artikel und alle Kommentare. Sehr informativ.
Ich habe zwei Fragen.
Werden rem-Einheiten für die Schriftgröße mit Media Queries empfohlen? Oder sind andere Einheitentypen (wie px) mit Media Queries besser?
Was sind die „Fallen“ (falls vorhanden), wenn man Media Queries aus einem bereits langen Stylesheet in ein eigenes externes Stylesheet auslagert?
Nochmals vielen Dank!
Gibt es eine Möglichkeit, die physische Größe des Geräts in Zoll (oder cm) zu bestimmen? Zum Beispiel könnte eine Auflösung von 2532×1170 für ein Smartphone von 5″ mal 2,5″ oder für ein Mini-Tablet von 7″ mal 3,5″ existieren, was auch die Abmessungen eines großen Smartphones sein könnten. Oder ein Tablet von 10″ mal 5″. Die Kenntnis der physischen Größe des Geräts wäre hilfreich, um die Größe der anzuzeigenden Bilder zu bestimmen. Für ein Smartphone möchten Sie möglicherweise die Hälfte des Bildschirms für das Bild verwenden, aber für ein Tablet möchten Sie möglicherweise ein Viertel des Bildschirms verwenden.
Gibt es eine Möglichkeit, Media Queries basierend auf dem Gerätetyp, d.h. Tablet, einzurichten, aber nicht basierend auf Pixeln, sondern nur, dass es erkennt, dass es ein Tablet ist und das kleine Bildschirmdesign anzeigt?
Mein Beispiel wäre ein iPad mit einem 1200px-Bildschirm, das nicht das Desktop-Design anzeigen soll, aber gleichzeitig sollen Desktop-Bildschirme mit 1200px weiterhin mit dem Desktop-Look funktionieren.
Ich habe eine Frage. Ich möchte den Tabelleninhalt in einer mobilen Vorschau als einzelne Tabelle anzeigen, da ich die Tabelle so oft wiederholt habe, wie Daten im Backend vorhanden sind. Aber wenn ich die mobile Vorschau oder sogar auf dem Mobiltelefon öffne, werden die Daten genauso angezeigt wie in der Desktop-Ansicht. Wie kann ich dies auf der Basis des Geräts unterscheiden? Danke
Hallo zusammen,
könnt ihr mir bitte vorschlagen,
Wie kann ich die Mac-Ansicht auf einem Desktop unter Windows 10 überprüfen?
Für Tablets siehe auch
pointer: coarse.Diese Diskussion war hilfreich: https://bugs.webkit.org/show_bug.cgi?id=209292
Hoppla, ich meine Any-Pointer
Hallo, wie passe ich meinen Text an verschiedene Geräte an? Wenn ich das mache
sieht es auf meinem Laptop gut aus, aber nicht auf meinem Handy.
Gibt es eine Möglichkeit, dass es sich an die Größe des verwendeten Geräts anpasst?
Vielen Dank