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


Posted in Javascript onNovember 18, 2017

实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了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>

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

Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
Vue如何清空对象
Mar 03 Vue.js
如何编写一个完整的Angular4 FormText 组件
Nov 18 #Javascript
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
基于jquery实现五星好评
Nov 18 #jQuery
基于JavaScript实现五子棋游戏
Aug 26 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python执行精确的小数计算方法
2019/01/21 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python代码如何注释
2020/06/01 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
给朋友的道歉信
2014/01/09 职场文书
高中校园广播稿
2014/01/11 职场文书
简短大学毕业感言
2014/01/18 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书