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 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
angular.element方法汇总
Jan 07 Javascript
简单实现js浮动框
Dec 13 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
一文帮你理解PReact10.5.13源码
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文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
基于python实现高速视频传输程序
2019/05/05 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
教师师德承诺书
2014/03/26 职场文书
质量标语大全
2014/06/12 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
会议主持词结束语
2015/07/03 职场文书
校园广播稿范文
2015/08/19 职场文书
《正比例》教学反思
2016/02/23 职场文书
七年级作文之游记
2019/12/11 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技