Detaillierte Erläuterung der Methode zur Anpassung des HTML5-Seiten-REM-Layouts

Die wichtigsten Methoden sind:

1. Berechnen Sie dynamisch die Schriftgröße des HTML-Root-Tags und legen Sie sie entsprechend dem Verhältnis des Designentwurfs zur Gerätebreite fest.
2. In CSS werden Breite, Höhe, relative Position usw. der Designentwurfselemente entsprechend dem gleichen Verhältnis in Werte in Rem-Einheiten umgewandelt.
3. Die Schriftarten im Designentwurf verwenden px als Einheit und werden durch Medienabfragen leicht angepasst.

Vereinfachte allgemeine Version:

 !(function(win, doc){ function setFontSize() { // Fensterbreite abrufen // So implementiert Zepto $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' ; // Um ​​die Breite auf über 640 zu begrenzen, muss CSS mit der Variablengröße übereinstimmen = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ; } var evt = 'onorientationchange' in win ? 'resize'; timer = null; win.addEventListener(evt, function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //setFontSize();}(window, document)) initialisieren;

Sehr genaue Version:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Breite des aktuellen Fensters abrufen var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ). width; // Größer als 1080px, drücke 1080, wenn (width > 1080) { width = 1080; var rem = width / 10; docEl.style.fontSize = rem + 'px'; .getComputedStyle(docEl)[font-size]); if (actualSize !== rem &&actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem /actualSize; docEl.style.fontSize = remScaled + 'px'; } var timer; = setTimeout(setFontSize, 100); } //Fensteraktualisierung ändert dynamisch die Schriftgröße WIN.addEventListener('resize', dbcRefresh, false); //Einmal berechnen, wenn die Seite angezeigt wird WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//Für H5-Aktivitäts-Push-Seiten sind das Breiten- und Höhenverhältnis erforderlich und die Funktion adjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); // Betrachten Sie die Navigationsleiste, wenn (width / height < 360 / 600 ) { return; } width = Math.ceil(height * 360 / 640); 0, left: 'auto', margin: '0 auto' }); // rem window.setFontSize(width) neu berechnen;}

Einfach zu bedienen, aber es mangelt an Flexibilität. Bitte schauen Sie sich die Demo an. Sie werden es verstehen.

 @media screen und ( min-width: 320px){html{font-size:50px}}@media screen und ( min-width: 360px){html{font-size:56.25px}}@media screen und ( min- Breite: 375px){html{font-size:58.59375px}}@media screen und ( min-width: 384px){html{font-size:60px}}@media screen und ( min-width: 400px){html{font-size:62.5px}}@media screen und ( min-width: 414px){html{font- size:64.6875px}}@media screen und ( min-width: 424px){html{font-size:66.25px}}@media screen und ( min-width: 480px){html{font-size:75px}}@media screen und ( min-width: 540px){html{font- size:84.375px}}@media screen und ( min-width: 640px){html{font-size:100px}}

Es kann entsprechend den persönlichen Projektanforderungen und dem Produktdesign entsprechend geändert werden. Die oben beschriebene Demo-Schreibmethode ist nicht eindeutig und festgelegt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.