„max-width' oder „max-device-width: Welche Medienabfrage sollte ich für Responsive Design verwenden?'.

Soll ich max-device-width oder max-width verwenden?

TL;DR

Für responsive Websites: Es ist besser, „min-width/max-width“ anstelle von „min-device-width/max-device-width“ zu verwenden in Medienabfragen, um einen breiteren Bereich von Bildschirmgrößen anzusprechen.

Erklärung

Medienfunktionen mit Gerätebreite sind im Spezifikationsentwurf für Media Queries Level 4 aus dem Jahr 2018 veraltet. Sie berücksichtigen die tatsächliche Bildschirmgröße des Geräts und nicht das Browser-Ansichtsfenster, was zu Inkonsistenzen im Reaktionsverhalten führen kann.

Warum max-width vs. max-device-width verwenden?

• max-width zielt auf die Größe des Ansichtsfensters ab und gewährleistet so die Reaktionsfähigkeit auf allen Geräten und Browserfenstern Größen.
• max-device-width zielt auf die physische Bildschirmgröße des Geräts ab und schränkt die Reaktionsfähigkeit beim Ändern der Größe des Browserfensters ein.

Zusätzliche Überlegungen

• Verwenden Sie ein Viewport-Meta-Tag (), um die Skalierung des Browser-Ansichtsfensters zu steuern.
• Berücksichtigen Sie gerätespezifische Medienfunktionen (z. B. Touch-Action) für ein besseres Touchscreen-Erlebnis.

Weiteres Lesen

• [Quirksmode.org – Ein Pixel ist kein Pixel ist kein Pixel](https://www.quirksmode.org/mobile/prefsizes.html)
• [W3 – Medienabfragen Level 4 Spezifikation](https://www.w3.org/TR/mediaqueries-4/#device-width)
• [Google Developers – Web Fundamentals – Viewport](https://developers.google.com/ web/fundamentals/design-and-ui/responsive-design/viewport)
• [Google Developers – Web Fundamentals – Responsive CSS-Medien querys](https://developers.google.com/web/fundamentals/design-and-ui/responsive-design/css-media-queries)
• [MDN – Verwenden des Viewport-Meta-Tags zur Steuerung des Layouts auf mobilen Browsern](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

Das obige ist der detaillierte Inhalt von„max-width' oder „max-device-width: Welche Medienabfrage sollte ich für Responsive Design verwenden?'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!