用rem.js来实现自适应屏幕大小，要注意border不用rem做单位
 代码如下：
  1.  (function (doc, win) {
  2.  //orientationchange : 判断手机是水平方向还是垂直方向，感应方向
  3.  
  4.  //doc ==》 document对象
  5.  //doc.documentElement ==> 得到文档的根元素--> <html>
  6.  //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度
  7.  var docEl = doc.documentElement,
  8.  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  9.  recalc = function () {
  10.  var clientWidth = docEl.clientWidth;
  11.  //获取不同移动端设备上的宽度
  12.  if (!clientWidth) return;
  13.  //320 是我们默认的手机屏幕
  14.  //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值
  15.  //这两者相除得到一个放大或缩小的比例值
  16.  //320 ip5 --> 20px
  17.  //375 ip6
  18.  //414 ip6s --> 25px;
  19.  //width:2rem;
  20.  docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';//750是iphone6像素的二倍
  21.  //设置根元素font-size 10.4167px
  22.  };
  23.  /*600px
  24.  20 * 600/320 -- > [2 -- 3] 放大范围
  25.  
  26.  200/320 -- > [0.5 -- 0.1] 缩小*/
  27.  if (!doc.addEventListener) return;
  28.  win.addEventListener(resizeEvt, recalc, false);
  29.  doc.addEventListener('DOMContentLoaded', recalc, false);
  30.  //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
  31.  })(document, window);
  32.  
  33.  //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死

后来看了一篇文章http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

里面提到，结合 rem 单位的方式给html元素设置了一个固定的px单位，这种很普遍的做法，改变html元素的字体大小时，可以使整个页面做相应调整。但是，它重写继承了用户设置的浏览器字体大小。 更夸张的说，这剥削了用户自行调整以获得最佳视觉效果的能力。

他建议：如果确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。

按照我的理解，上述代码就可以修改为：

  1.  (function (doc, win) {
  2.    //orientationchange : 判断手机是水平方向还是垂直方向，感应方向
  3.  
  4.    //doc ==》 document对象
  5.    //doc.documentElement ==> 得到文档的根元素-->  <html>
  6.    //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度
  7.    var docEl = doc.documentElement,
  8.      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  9.      recalc = function () {
  10.        var clientWidth = docEl.clientWidth;
  11.        //获取不同移动端设备上的宽度
  12.        if (!clientWidth) return;
  13.        //320 是我们默认的手机屏幕
  14.        //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值
  15.        //这两者相除得到一个放大或缩小的比例值
  16.        //320 ip5 --> 20px
  17.        //375 ip6
  18.        //414 ip6s --> 25px;
  19.        //width:2rem;
  20.        docEl.style.fontSize = 1.25 * (clientWidth / 750) + 'rem';//单位变成了rem
  21.        //设置根元素font-size 10.4167px
  22.      };
  23.      /*600px
  24.      20 * 600/320  -- >  [2 -- 3] 放大范围
  25.  
  26.      200/320 -- > [0.5 -- 0.1] 缩小*/
  27.    if (!doc.addEventListener) return;
  28.    win.addEventListener(resizeEvt, recalc, false);
  29.    doc.addEventListener('DOMContentLoaded', recalc, false);
  30.    //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
  31.  })(document, window);
  32.  
  33.  //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死

不知道这样的做法是否正确，在我的使用中没有出现问题。欢迎大家指正。

自适应rem.js的更多相关文章

  1. 移动端rem.js的使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...

  2. 移动端rem.js使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...

  3. rem.js的用法及在浏览器端的适配

    首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...

  4. rem.js移动布局实例教程

    最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...

  5. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  6. rem js 自适应布局

    (function(doc, win) { resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//o ...

  7. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  8. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  9. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

随机推荐

  1. HashMap源码分析（一）

    前言:相信不管在生产过程中还是面试过程中,HashMap出现的几率都非常的大,因此有必要对其源码进行分析,但要注意的是jdk1.8对HashMap进行了大量的优化,因此笔者会根据不同版本对HashMa ...

  2. centos 网卡状态

    由于ifconfig命令没法看到网卡的一些状态, 以下有5种方法查看网卡状态,是否连通网线 1)# dmesg | grep eth.....e1000: eth0 NIC Link is Up 10 ...

  3. Couchbase入门——环境搭建以及HelloWorld

    一.引言 NoSQL(Not Only SQL),火了很久了,一直没空研究.最近手上一个项目对Cache有一定的要求,借此机会对NoSQL入门一下.支持NoSQL的数据库系统有很多,  比如Redis ...

  4. JDK8中HashMap

    引用别人的一句话: JDK1.6,JDK1.7中,HashMap采用位桶+链表实现,即使用链表处理冲突,同一hash值的链表都存储在一个链表里.但是当位于一个桶中的元素较多,即hash值相等的元素较多 ...

  5. Linux(Ubuntu)使用日记------trash-cli防止误删文件

    1.安装过程 cd /tmp git clone https://github.com/andreafrancia/trash-cli cd trash-cli sudo python setup.p ...

  6. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  7. DAY29、元类

    一.eval内置函数eval内置函数的使用场景: 1.执行字符串会得到相应的执行结果 2.一般用于类型转换,得到dict.list.tuple例: dic_str = ''{'a':1,'b':2}' ...

  8. springdata 多对多配置

  9. Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array 分类讨论连续递推dp

    题意:给出一个 数列 和一个x 可以对数列一个连续的部分 每个数乘以x  问该序列可以达到的最大连续序列和是多少 思路: 不是所有区间题目都是线段树!!!!!! 这题其实是一个很简单的dp 使用的是分 ...

  10. LUYA-CDM

    下载链接:https://pan.baidu.com/s/11Lq3IWcAcAs9gYbq4mYm1Q 密码:n1kz