用rem.js来实现自适应屏幕大小，要注意border不用rem做单位
 代码如下：
 (function (doc, win) {

 //orientationchange : 判断手机是水平方向还是垂直方向，感应方向

 //doc ==》 document对象

 //doc.documentElement ==> 得到文档的根元素--> <html>

 //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度

 var docEl = doc.documentElement,

 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

 recalc = function () {

 var clientWidth = docEl.clientWidth;

 //获取不同移动端设备上的宽度

 if (!clientWidth) return;

 //320 是我们默认的手机屏幕

 //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值

 //这两者相除得到一个放大或缩小的比例值

 //320 ip5 --> 20px

 //375 ip6

 //414 ip6s --> 25px;

 //width:2rem;

 docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';//750是iphone6像素的二倍

 //设置根元素font-size 10.4167px

 };

 /*600px

 20 * 600/320 -- > [2 -- 3] 放大范围

 200/320 -- > [0.5 -- 0.1] 缩小*/

 if (!doc.addEventListener) return;

 win.addEventListener(resizeEvt, recalc, false);

 doc.addEventListener('DOMContentLoaded', recalc, false);

 //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算

 })(document, window);

 //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死

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

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

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

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

 (function (doc, win) {

   //orientationchange : 判断手机是水平方向还是垂直方向，感应方向

   //doc ==》 document对象

   //doc.documentElement ==> 得到文档的根元素-->  <html>

   //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度

   var docEl = doc.documentElement,

     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

     recalc = function () {

       var clientWidth = docEl.clientWidth;

       //获取不同移动端设备上的宽度

       if (!clientWidth) return;

       //320 是我们默认的手机屏幕

       //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值

       //这两者相除得到一个放大或缩小的比例值

       //320 ip5 --> 20px

       //375 ip6

       //414 ip6s --> 25px;

       //width:2rem;

       docEl.style.fontSize = 1.25 * (clientWidth / 750) + 'rem';//单位变成了rem

       //设置根元素font-size 10.4167px

     };

     /*600px

     20 * 600/320  -- >  [2 -- 3] 放大范围

     200/320 -- > [0.5 -- 0.1] 缩小*/

   if (!doc.addEventListener) return;

   win.addEventListener(resizeEvt, recalc, false);

   doc.addEventListener('DOMContentLoaded', recalc, false);

   //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算

 })(document, window);

 //如果你不想进行一个响应式设计的开发，你可以直接把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. java中的重写与重载

    重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...

  2. 我为什么要花大力气从头研发智表ZCELL（一个仿EXCEL的前端插件）

    为什么呢,一个前端用的,类似EXCEL的操作的JS 插件,从头研发真的有必要吗?可能你会觉得没有必要吧,其实我自己也问过自己好多遍.因为业界有更加强大的spreadjs,也有比较轻型的JEXCEL,自 ...

  3. ubuntu 安装 google Gtest [转]有效性待验证

    最近在做一些东西,用过gtest,废话少说,现讲其再ubuntu上安装的 方法贴出来,以供朋友们参考: 安装gtest分三步: 1.安装源代码 在ubuntu的桌面上,右键选择打开终端,在终端中输入如 ...

  4. ASP.NET Core 2.1与2.2 SignalR CORS 跨域问题

    将 SignalR 集成到 ASP.NET Core api 程序的时候,按照官方 DEMO 配置完成,本地访问没有问题,但是发布之后一直报跨域问题,本地是这样设置的: Asp.net core 2. ...

  5. [LeetCode] 18. 四数之和

    题目链接:https://leetcode-cn.com/problems/4sum/ 题目描述: 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个 ...

  6. 借助FreeHttp任意篡改http报文 （使用·实现）

    引言 FreeHttp是一个Fiddler插件借助FreeHttp您可按照您自己的设定修改请求或响应报文,这对测试及调试都非常有用 比如您发现线上页面js文件错误,直接使用规则替换新的js文件您可以在 ...

  7. ABP之启动配置

    ASP.NET Boilerplate提供了在StartUp中配置其模块的基础设施和模型. 配置ASP.NET Boilerplate 配置ABP是在模块的PreInitialize 方法中做的,如下 ...

  8. mysql jdbc 官方编程示例

    /* Basic example of an application using JDBC API of Connector/C++ */ /* Standard C++ includes */ #i ...

  9. HTTP的一些基本概念

    HTTP协议:HTTP(超文本传输协议)协议就是计算机在网络中进行通信所必须共同遵守的规则,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器,我们目前使用的是HTTP/1.1 ...

  10. RMQ 问题 ST 算法（模板）

    解决区间查询最大值最小值的问题 用 $O(N * logN)$ 的复杂度预处理 查询的时候只要 $O(1)$ 的时间  这个算法是 real 小清新了   有一个长度为 N 的数组进行 M 次查询 可 ...