So passen Sie die Schriftgröße in js an und berechnen sie

Dieses Mal zeige ich Ihnen, wie Sie die Schriftgröße mit js abgleichen und berechnen. Was sind die Vorsichtsmaßnahmen für die Anpassung und Berechnung der Schriftgröße mit js? Werfen wir einen Blick darauf.

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 Implementierungscode des zugehörigen JavaScript:

(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. Warum 640 wählen? 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. Wie zum Beispiel iPhone 5 verwendet den Retina-Retina-Bildschirm und verwendet 2 Pixel x 2 Pixel Gerätepixel, um 1 Pixel x 1 Pixel CSS darzustellen Pixel, sodass die Pixelanzahl des Geräts 640 x 1136 Pixel und die logische CSS-Pixelanzahl 320 x 568 Pixel beträgt.

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 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 gemeinsame Verwendung von „px“ und „rem“ in Betracht ziehen. px“, um dies zu erreichen. Der Effekt unter IE6-8, und dann „Rem“ verwenden, 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:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

nbsp;html>

 
 <meta>
   <meta>
   <meta>
   <meta>
   <meta>
 <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>
 
 
 <header>页面头部</header>
 <p>
  </p><p>左</p>
  <p>中</p>
  <p>右</p>
  <p>左</p>
  <p>中</p>
  <p>右</p>
 
 <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>
 

Empfohlene Lektüre:

Die ausführlichste Erklärung der Gulp-Installation + Verpackung + Zusammenführung

Kompatibel mit canvas.toDataURL unter IE11 Lösungen für sexuelle Probleme

Das obige ist der detaillierte Inhalt vonSo passen Sie die Schriftgröße in js an und berechnen sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!