通过设定html根标签的font-size值,控制rem来达到全局布局的自适应的,CSS长度单位全部通过rem设定

必须在head在中引入不可以延迟引入;

(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;

      if(clientWidth>=750){//屏幕最大宽度设定值
        docEl.style.fontSize = '100px';
      }else if(clientWidth>320&&clientWidth<750){
        docEl.style.fontSize = 100 * (clientWidth/ 750) + 'px';
      }else{//最小屏幕设定值
        docEl.style.fontSize = 100 * (320 / 750) + 'px';
      }

        };

    // Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
return;
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr; //
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
})(); })(document, window);

关于rem的自定义HTML比例设定的更多相关文章

  1. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  2. rem与px的相爱相杀

    rem 简介:为元素设定字体大小:相对大小:只相对HTML根元素. 优点:只修改根元素就可以成比例调整所有字体的大小. bug:IE8及更早版本不兼容. hack:多写一个绝对单位px的声明,不兼容版 ...

  3. C#综合揭秘——通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  4. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  5. 【转】C#综合揭秘——通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  6. Web移动端页面 --响应式和动态REM

    响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...

  7. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  8. Salesforce自定义权限简介

    自定义权限(Custom Permission) Salesforce默认提供了多种方式设定用户的权限,比如简档.权限集等.在这些设定中,已经包括了系统中的对象.应用.字段.页面布局等组件,管理员或开 ...

  9. 3分钟读懂移动端rem使用方法

    1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...

随机推荐

  1. Codeforces Round #370 (Div. 2) E. Memory and Casinos (数学&&概率&&线段树)

    题目链接: http://codeforces.com/contest/712/problem/E 题目大意: 一条直线上有n格,在第i格有pi的可能性向右走一格,1-pi的可能性向左走一格,有2中操 ...

  2. tips of my ubuntu 16.04 LTS

    update_0 : sudo .../idea.sh 才会把idea安装上,不加sudo也会启动,但是不会在开始菜单中找到程序. ---------------------------------- ...

  3. Web安全

    随着Web2.0.网络社交等一系列新型的互联网产品的诞生,基于Web环境的互联网应用越来越广泛,企业信息化的过程中,越来越多的应用都架设在Web平台上.Web业务的迅速发展吸引了黑客们的强烈关注,接踵 ...

  4. 深入了解 JavaScript 中的 for 循环

    在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...

  5. INSERT INTO 语句的语法错误【 OLE报错,office终端执行SQL没有问题】

    表名,字段在代码执行之前一定要进行" [ 字段.表名 ] "中括号包裹,不然会报INSERT INTO 语句的语法错误! office终端没有报错的原因,应该是office在执行之 ...

  6. 关于编译报错“dereferencing pointer to incomplete type...

    今天同事问了我一个问题,他make的时候报错,“第201行:dereferencing pointer to incomplete type”,我随即查阅了很多资料,也没看出个所以然.最后问题得到了解 ...

  7. hibernate 返回新插入数据的Id

    例如 表明 studentInfo String sql="set set nocount on studentInfo(列名,列名) values('值','值');select @@id ...

  8. NAT123内网映射端口

    在无内网路由管理员权限的情况下,需要将内网web应用暴露到公网访问,此时需要用到花生壳或者nat123(两个应用都不是免费的,其中花生壳可以8元认证,以后免费使用,nat123按天收费) 花生壳 ht ...

  9. jQuery初级篇(一)

    知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一.      jQ ...

  10. HighChats图表控件显示精度小数点的方法

    相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{    fo ...