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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
详解webpack babel的配置
Jan 09 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
如何编写一个完整的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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
对pandas中apply函数的用法详解
2018/04/10 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python代码编写计算器小程序
2020/03/30 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python 如何查找特定类型文件
2020/08/17 Python
Python可以用来做什么
2020/11/23 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
关爱留守儿童标语
2014/06/18 职场文书
2016春节慰问信范文
2015/03/25 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
创业计划书之美甲店
2019/09/20 职场文书
react 路由Link配置详解
2021/11/11 Javascript
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python