Heim > Artikel > Web-Frontend > js implementiert die automatische REM-Anpassung und Berechnung der Schriftgröße
js implementiert die automatische REM-Anpassung und Berechnung der Schriftgröße
- 小云云Original
- 2018-01-18 10:50:331493Durchsuche
In diesem Artikel wird hauptsächlich das Beispiel der automatischen REM-Anpassung und Berechnung der Schriftgröße in js vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Während des eigentlichen Entwicklungsprozesses werden wir oft durch verschiedene Breiten- und Höhenberechnungen verwirrt. Insbesondere bei der Verwendung der Rem-Berechnungsmethode überrascht das adaptive Layout viele Programmierer. Um diese Art von Problem zu lösen, können Sie meiner Meinung nach js verwenden, um Änderungen der Bildschirmbreite zu überwachen und den Wert der Schriftartgröße des HTML-Stammelements zu ändern.
Das Folgende ist der relevante JavaScript-Implementierungscode:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);Dieser Code wählt 640px als Basiswert aus 🎜 Die Seitenbreite von >640 Pixel ist eine sichere maximale Breite, die sicherstellt, dass auf beiden Seiten der mobilen Seite kein Leerraum entsteht. Beachten Sie, dass px hier ein logisches CSS-Pixel ist, das sich vom physischen Pixel des Geräts unterscheidet. Beispielsweise verwendet das iPhone 5 einen Retina-Bildschirm und ein Gerätepixel von 2 x 2 Pixel, um ein CSS-Pixel von 1 x 1 Pixel darzustellen. Die Gerätepixelnummer beträgt also 640 x 1136 Pixel und die logische CSS-Pixelnummer beträgt 320 x 568 Pixel .
Wenn Sie also zur mobilen Seite wechseln möchten, müssen Sie die Breite des Renderings auf 640 Pixel skalieren.
Wenn beispielsweise die Breite eines p auf der Seite 60 und die Höhe 65 beträgt, können Sie den Stil direkt wie folgt schreiben:
{
width:0.6rem;
height:0.65rem
}Browserkompatibilität
rem ist eine neu eingeführte Maßeinheit in CSS3. Jeder wird definitiv frustriert und besorgt über die Browserunterstützung sein. Haben Sie keine Angst, Sie werden überrascht sein, dass es eine ganze Reihe unterstützter Browser gibt, wie zum Beispiel: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ und Opera11+. Es ist nur so, dass der arme IE6-8 das nicht kann, also behandle sie einfach als transparent. Ich war schon immer so.
Wenn Sie jedoch Einheiten zum Festlegen von Schriftarten verwenden, können Sie den IE nicht vollständig ignorieren. Wenn Sie dieses REM verwenden möchten, aber auch mit dem Effekt unter IE kompatibel sein möchten, können Sie die Verwendung von „px“ und „“ in Betracht ziehen. rem“ zusammen. Verwenden Sie „px“, um den Effekt unter IE6-8 zu erzielen, und verwenden Sie dann „Rem“, um den Effekt des Browsers zu erzielen. Lassen Sie IE6-8 einfach nicht mit der Textänderung ändern. Wer macht diesen IE6-8 so alt? Es ist ziemlich interessant, wenn Sie es nicht ausprobieren möchten. Vielleicht wird dies die gängige Maßeinheit.
Vollständiger Beispielcode:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>响应式布局</title>
<style>
html{font-size: 20px;width: 100%;height: 100%;}
body{margin: 0;padding: 0;}
header,footer{width: 100%;background: #17A578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;}
.footer{position: fixed;bottom: 0;}
.box{}
.public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;}
.left{background: #f00;}
.center{background: #048F74;}
.right{background: #000;}
</style>
</head>
<body>
<header>页面头部</header>
<p class="box">
<p class="public left">左</p>
<p class="public center">中</p>
<p class="public right">右</p>
<p class="public left">左</p>
<p class="public center">中</p>
<p class="public right">右</p>
</p>
<footer class="footer">页面底部</footer>
<script>
//orientationchange方向改变事件
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
})(document, window);
//alert(document.documentElement.clientWidth/320)
</script>
</body>
</html>HTML5-Seiten-REM-Layout-Anpassungsmethode Detaillierte Beschreibung ErklärungJavascript verwendet rem für die reaktionsfähige gemeinsame Nutzung von Entwicklungsbeispielenrem absolute adaptive LösungsanalyseDas obige ist der detaillierte Inhalt vonjs implementiert die automatische REM-Anpassung und Berechnung der Schriftgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!