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 相关文章推荐
农历与西历对照
Sep 06 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
如何编写一个完整的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文件缓存类实现代码
2015/10/26 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
请解释接口的显式实现有什么意义
2012/05/26 面试题
学生学习总结的自我评价
2013/10/22 职场文书
父母寄语大全
2014/04/12 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
银行求职信范文
2019/05/13 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python