suchen
HeimWeb-FrontendCSS-TutorialEine kurze Diskussion über den Unterschied zwischen CSS3-Gerätebreite und Breite

In diesem Artikel erfahren Sie mehr über den Unterschied zwischen Gerätebreite und Breite bei CSS-Medienabfragen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über den Unterschied zwischen CSS3-Gerätebreite und Breite

【Empfohlenes Tutorial: CSS-Video-Tutorial

1.device-width

Definition: Definieren Sie die sichtbare Breite des Bildschirms des Ausgabegeräts.

Unabhängig davon, ob Ihre Webseite in Safari geöffnet oder in eine Webansicht eingebettet ist, hängt die Gerätebreite nur von Ihrem Gerät ab. Wenn es sich um dasselbe Gerät handelt, ändert sich der Wert nicht.

Zum Beispiel beträgt die Gerätebreite * Gerätehöhe des iPhone6 ​​375 * 667, was nichts mit dem DPR usw. zu tun hat.

2.width

Definition: Definieren Sie die Breite des sichtbaren Bereichs der Seite im Ausgabegerät.

Die Ausgabe ist die Breite und Höhe des sichtbaren Bereichs Ihrer Webseite. Unter der Annahme, dass es sich bei Ihrer Webseite um eine in einer Webansicht verschachtelte Seite handelt, entspricht die Breite tatsächlich der Breite und Höhe der Webansicht Browser, Breite und Höhe können unterschiedlich sein. Wenn Ihre Seite ein Rem-Layout verwendet und für Retina-Bildschirme, ist dpr>1, content="width=device-width, initial-scale=0.5, Minimum-scale= im eingestellt Meta-Tag 0,5, Maximum-Scale=0,5, User-Scalable=No, Viewport-Fit=Cover“, die Breite auf Ihrem iPhone 6 beträgt 750 Pixel.

Ich verwende hier mehr Gerätebreite und Gerätehöhe, da die horizontale Bildschirmsituation nicht berücksichtigt werden muss.

Wenn Sie sich beispielsweise an iphoneX anpassen, kennen Sie bereits die Größe von iphoneX (375 * 812). die folgende Aussage:

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

Ein weiteres Beispiel ist der neueste Samsung-Faltbildschirm

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

Kurz gesagt, die Gerätebreite ändert sich in einem Gerät nicht. Die Breite ändert sich in verschiedenen Layoutschemata unterschiedlich Die Anzeige im Container kann unterschiedlich sein. Hier entspricht die Gerätebreite meiner Meinung nach der window.screen.width von js und die Breite entspricht der document.body.clientWidth von js.

Nehmen Sie auch meine Adaption des Huawei-Faltbildschirms auf. Da es derzeit kein echtes Telefon gibt, weiß ich nur, dass die Auflösung von Huawei im aufgeklappten Zustand 2200 * 2480 beträgt. Der DPR ist noch nicht klar das Gerät. -width und device-height (Ich kann die Breite hier nicht für die Abfrage verwenden, da es mit der Geschäftslogik zusammenhängt), also habe ich „device-aspect-ratio“ gewählt

Dann wird das Geräte-Seitenverhältnis in CSS als Dezimalzahl berechnet.

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

Geräte-Seitenverhältnis unterstützt keine Dezimalzahlen, daher kann es nicht übereinstimmen.

Also habe ich überprüft, wie man verhindern kann, dass less das 55/62-Ergebnis ausführt, und habe es gefunden Setzen Sie die Attribute einfach in Anführungszeichen und fügen Sie davor eine Tilde ein, etwa so:

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

Problem gelöst!

Allerdings wird das Geräte-Seitenverhältnis auf MDN nicht mehr empfohlen. Wenn ich eine bessere Lösung finde, werde ich eine Alternative verwenden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über den Unterschied zwischen CSS3-Gerätebreite und Breite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Dieser Artikel ist reproduziert unter:博客园. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Draggin ' und Dropfen ' in ReactDraggin ' und Dropfen ' in ReactApr 17, 2025 am 11:52 AM

Das React -Ökosystem bietet uns viele Bibliotheken, die alle auf die Interaktion von Drag & Drop konzentrieren. Wir haben React-Dnd, React-beautiful-dnd,

Schnelle SoftwareSchnelle SoftwareApr 17, 2025 am 11:49 AM

In letzter Zeit gab es einige wunderbar miteinander verbundene Dinge über schnelle Software.

Verschachtelte Gradienten mit HintergrundclipVerschachtelte Gradienten mit HintergrundclipApr 17, 2025 am 11:47 AM

Ich kann nicht sagen, dass ich das all das oft im Hintergrund-Clip verwende. I ' D Wette It ' wird in der täglichen CSS-Arbeit kaum jemals verwendet. Aber ich wurde in einem Posten von Stefan Judis daran erinnert,

Verwenden von RequestAnimationFrame mit React -HooksVerwenden von RequestAnimationFrame mit React -HooksApr 17, 2025 am 11:46 AM

Die Animation mit RequestAnimationFrame sollte einfach sein, aber wenn Sie die Dokumentation von React nicht gründlich gelesen haben, werden Sie wahrscheinlich auf ein paar Dinge stoßen

Müssen Sie nach oben auf der Seite scrollen?Müssen Sie nach oben auf der Seite scrollen?Apr 17, 2025 am 11:45 AM

Vielleicht ist der einfachste Weg, dies dem Benutzer anzubieten, ein Link, der auf eine ID auf das Element abzielt. Also wie ...

Die beste API (GraphQL) ist eine, die Sie schreiben, die Sie schreibenDie beste API (GraphQL) ist eine, die Sie schreiben, die Sie schreibenApr 17, 2025 am 11:36 AM

Hören Sie, ich bin kein GraphQL -Experte, aber ich arbeite gerne damit. Die Art und Weise, wie es mir Daten als Front-End-Entwickler vorstellt, ist ziemlich cool. Es ist wie ein Menü von

Wöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-LadeindikatorWöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-LadeindikatorApr 17, 2025 am 11:26 AM

In der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.

Verschiedene Methoden zur Erweiterung einer Schachtel und gleichzeitig den GrenzradiusVerschiedene Methoden zur Erweiterung einer Schachtel und gleichzeitig den GrenzradiusApr 17, 2025 am 11:19 AM

I ' Ich habe kürzlich eine interessante Änderung auf Codepen bemerkt: Als es ein Rechteck mit abgerundeten Ecken auf der Homepage schwebt, expandieren Sie sich im Rücken.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.