欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现rem自动匹配计算font-size的示例

程序员文章站 2022-06-25 13:38:19
实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改...

实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改html 根元素font-size的值。

下面是相关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);

此代码选640px为基准值,为什么选640呢,

640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iphone 5使用的是retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的css逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候,需要把效果图宽度等比例缩放到640px。

比如当页面中某一div的宽度为60,高度为65的时候,就可以直接这样写样式:

{
  width:0.6rem;
  height:0.65rem
}

浏览器的兼容性

rem是css3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:mozilla firefox 3.6+、apple safari 5+、google chrome、ie9+和opera11+。只是可怜的ie6-8无法,你们就把他们当透明了吧,我向来都是如此。

不过使用单位设置字体,可不能完全不考虑ie了,如果你想使用这个rem,但也想兼容ie下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现ie6-8下的效果,然后使用“rem”来实现代浏览器的效果。就让ie6-8不能随文字的改变而改变吧,谁让这个ie6-8这么老呢?大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。

完整实例代码:

<!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>
 <div class="box">
  <div class="public left">左</div>
  <div class="public center">中</div>
  <div class="public right">右</div>
  <div class="public left">左</div>
  <div class="public center">中</div>
  <div class="public right">右</div>
 </div>
 <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。