1. @media screen realisiert adaptives Weblayout
Vorteile: Es sind keine Plug-Ins erforderlich und es kann sich an verschiedene Fenstergrößen anpassen , einfach in CSS das @media-Bildschirmattribut hinzufügen.
Offizielle Dokumentation: @media kann verschiedene Stile für verschiedene Bildschirmgrößen festlegen. Insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich.
Syntax: @media mediatype and|not|only (media feature) { CSS-Code;
2.rem-AnpassungDiese Methode ist ein Originalartikel des CSDN-Bloggers „sxs1995“, blog.csdn.net/sxs1995/art…
Die Berechnungseinheit ist 640px = 6,40rem,
Wenn die Breite des Designentwurfs 750px beträgt, ist i = 750; Wenn die Breite des Designentwurfs 640px beträgt, ist i = 640.
Nachteile: Beim ersten Laden der Seite blinkt die Zeile 1-2 Sekunden lang und das Benutzererlebnis bei der Vorschau auf Mobiltelefonen ist nicht gut
/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */ h5{ color: black; } @media screen and (max-width: 1200px){ h5{ color: #eee; } } /* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */ @media screen and (min-width: 869px) and (max-width: 900px){ h5{ color: red; } } /* 屏幕宽度小于 320px 则 h5 的字体大小是20px */ @media only screen and (max-width: 320px){ h5{ font-size: 20px; } }
3. Verwenden Sie @media, um die REM-Anpassung zu implementieren
Vorteile: Wenn sich die Bildschirmbreite ändert, müssen Sie zur Anpassung nur die Schriftgröße im HTML-Element ändern
!function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>720&&(n=720); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);
Ich habe den Artikel des Autors JowayYoung über die flexible Nutzung von CSS-Entwicklungsfähigkeiten auf Nuggets gesehen vw zum Anpassen des adaptiven rem-Layouts
Vorteile: Die Verwendung des rem-Layouts auf dem mobilen Endgerät erfordert das Festlegen der Schriftgröße verschiedener Bildschirmseitenverhältnisse über JS. Die Kombination von vw-Einheiten und calc() kann sich der Kontrolle von JS entziehen
/* 不同屏幕宽度，设置不同的font-size */ @media screen and (width:750px){html{font-size:100px}} @media screen and (width:749px){html{font-size:99.87px}} @media screen and (width:748px){html{font-size:99.73px}} ... @media screen and (width:321px){html{font-size:42.8px}} @media screen and (width:320px){html{font-size:42.67px}}
Derzeit habe ich alle oben genannten Methoden verwendet. In Anbetracht der Menge an Code verwende ich hauptsächlich vw, um das rem-adaptive Layout anzupassen. Haben Sie weitere bessere Vorschläge? Ich werde es sorgfältig lesen, danke.
Empfohlenes Tutorial: „
CSS-TutorialDas obige ist der detaillierte Inhalt von4 Anpassungsmethoden für mobile Endgeräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
