Home >Web Front-end >JS Tutorial >Examples to explain js's implementation of rem automatic matching and calculation of font-size

Examples to explain js's implementation of rem automatic matching and calculation of font-size

小云云Original: 2017-12-19 16:40:031879browse

During the actual development process, we are often confused by various width and height calculations. Especially using the rem calculation method, adaptive layout stumps a large number of programmers. In order to solve this kind of problem, I think you can use js to monitor screen width changes to change the value of the HTML root element font-size. This article mainly introduces the example of automatic rem matching and calculation of font-size in js. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The following is the relevant JavaScript implementation code:

(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);

This code selects 640px as the base value. Why choose 640?

640px The page width is a safe maximum width, ensuring that there will be no white space on both sides of the mobile page. Note that px here is a CSS logical pixel, which is different from the physical pixel of the device. For example, the iPhone 5 uses a Retina screen, and uses a device pixel of 2px x 2px to represent a css pixel of 1px x 1px, so the device pixel number is 640 x 1136px, and its CSS logical pixel number is 320 x 568px.
So when you want to switch to the mobile page, you need to scale the width of the rendering to 640px.

For example, when the width of a p on the page is 60 and the height is 65, you can directly write the style like this:

{
  width:0.6rem;
  height:0.65rem
}

Browser compatibility

rem is a newly introduced measurement unit in CSS3. Everyone will definitely feel frustrated and worried about browser support. In fact, there is no need to be afraid. You may be surprised that there are quite a few supported browsers, such as: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ and Opera11+. It's just that poor IE6-8 can't, so just treat them as transparent. I've always been like this.

However, when using units to set fonts, you cannot completely ignore IE. If you want to use this REM, but also want to be compatible with the effect under IE, you can consider using "px" and "rem" together. Use "px" to achieve the effect under IE6-8, and then use "Rem" to achieve the effect of the browser. Just let IE6-8 not change with the change of text. Who makes this Ie6-8 so old? It's quite interesting if you don't want to try it. Maybe this will become the mainstream unit of measurement.

Complete example code:

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

Related recommendations:

Share the introduction and related aspects of font-size syntax Example tutorial

Using the CSS font-size-adjust attribute to improve web page layout details

wap mobile page is calculated based on dpr and width font-size corresponds to numerical value_html/css_WEB-ITnose

The above is the detailed content of Examples to explain js's implementation of rem automatic matching and calculation of font-size. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed example of three.js drawing a 3D cubeNext article：Detailed example of three.js drawing a 3D cube

See more

Examples to explain js's implementation of rem automatic matching and calculation of font-size

Related articles