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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
Layui 动态禁止select下拉的例子
Sep 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
星际玩家的三大定律
2020/03/04 星际争霸
解析coreseek for sphinx的使用
2013/06/21 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
使用python绘制二维图形示例
2019/11/22 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
如何手工释放资源
2013/12/15 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
学生会部长竞聘书
2014/03/31 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
导游词之南京夫子庙
2019/12/09 职场文书