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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
js实现动态显示时间效果
Mar 06 Javascript
vue如何截取字符串
May 06 Javascript
javascript头像上传代码实例
Sep 28 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JS中的变量作用域(console版)
Jul 18 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来检测proxy
2006/10/09 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
如何实现JS函数的重载
2006/09/22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
flask开启多线程的具体方法
2020/08/02 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python3中编码获取网页的实例方法
2020/11/16 Python
纽约海:Sea New York
2018/11/04 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
班委竞选演讲稿
2014/04/28 职场文书
给校长的一封检讨书
2014/09/20 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
会计入职心得体会
2016/01/22 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Python内置数据结构列表与元组示例详解
2021/08/04 Python