Example of js implementing rem automatic matching and calculation of font-size-JS Tutorial-php.cn

Example of js implementing rem automatic matching and calculation of font-size

韦小宝

Release： 2018-01-16 11:11:05

Original

1274 people have browsed it

This article mainly introduces the example of automatic rem matching and calculation of font-size in js. The editor thinks it is quite good. Now I will share the js source code with you and give you a reference. If you are interested in js, please follow the editor to take a look.

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.

The following is the implementation code related to JavaScript:

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

Copy after login

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

The page width is 640px It 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
}

Copy after login

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>

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's learning! !

Related recommendations:

The most complete JavaScript learning summary

Sharing better solutions for JavaScript experience asynchronous

How to use regular expressions to highlight JavaScript code

The above is the detailed content of Example of js implementing rem automatic matching and calculation of font-size. For more information, please follow other related articles on the PHP Chinese website!