How to match and calculate font-size in js-JS Tutorial-php.cn

How to match and calculate font-size in js

php中世界最好的语言

Release： 2018-04-14 14:40:48

Original

1891 people have browsed it

This time I will show you how to match and calculate font-size in js, and what are the precautions for matching and calculating font-size in js. The following is a practical case, let's 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 = '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);

Copy after login

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

The page width of 640px 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. Such as iPhone 5 is using Retina retina screen, using 2px x 2px device pixel to represent 1px x 1px css pixel, so the device pixel count is 640 x 1136px, while its CSS logical pixel count 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 unit of measurement in CSS3. Everyone will definitely feel frustrated and worried about browser support. In fact, you don’t 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 and use "px" to achieve it. 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 = '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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!