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:331540Durchsuche

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 = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if(clientWidth>=640){
        docEl.style.fontSize = &#39;100px&#39;;
      }else{
        docEl.style.fontSize = 100 * (clientWidth / 640) + &#39;px&#39;;
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(&#39;DOMContentLoaded&#39;, 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:

Verwandte Empfehlungen:

<!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 = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
      recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
       docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;
      };
      //alert(docEl)
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
     doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false)//绑定浏览器缩放与加载时间
    })(document, window);
    //alert(document.documentElement.clientWidth/320)

  </script>
 </body>
</html>

HTML5-Seiten-REM-Layout-Anpassungsmethode Detaillierte Beschreibung Erklärung

Javascript verwendet rem für die reaktionsfähige gemeinsame Nutzung von Entwicklungsbeispielen

rem absolute adaptive Lösungsanalyse

Das 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!

JavaScript html5 firefox css chrome safari css3 html JS iphone

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Gulp-Installation sowie der Verpackung und ZusammenführungNächster Artikel：Ausführliche Erläuterung der Gulp-Installation sowie der Verpackung und Zusammenführung

In Verbindung stehende Artikel

Mehr sehen