关于rem的自定义HTML比例设定
通过设定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比例设定的更多相关文章
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- rem与px的相爱相杀
rem 简介:为元素设定字体大小:相对大小:只相对HTML根元素. 优点:只修改根元素就可以成比例调整所有字体的大小. bug:IE8及更早版本不兼容. hack:多写一个绝对单位px的声明,不兼容版 ...
- C#综合揭秘——通过修改注册表建立Windows自定义协议
引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转】C#综合揭秘——通过修改注册表建立Windows自定义协议
引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- Salesforce自定义权限简介
自定义权限(Custom Permission) Salesforce默认提供了多种方式设定用户的权限,比如简档.权限集等.在这些设定中,已经包括了系统中的对象.应用.字段.页面布局等组件,管理员或开 ...
- 3分钟读懂移动端rem使用方法
1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...
随机推荐
- spark 1.5.2配置记录
1)slaves # A Spark Worker will be started on each of the machines listed below. dataNode 2)spark-env ...
- 【PCB】电子元件封装大全及封装常识
电子元件封装大全及封装常识 电子元件封装大全及封装常识 一.什么叫封装封装,就是指把硅片上的电路管脚,用导线接引到外部接头处,以便与其它器件连接.封装形式是指安装半导体集成电路芯片用的外壳.它不仅起着 ...
- 有关利用python获取网页, 以及KDD近几年论文标题与摘要链接
最近一直在看KDD的论文,不过,由于老师并没有什么合理的方向性,所以考虑把kdd中的大部分内容都利用python将所有标题.摘要获取下来. 还有一个原因在于,看acm上的摘要,都只显示了两行,再看多点 ...
- 三、Python 变量、运算符、表达式
3.1 变量 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,值可以改变,其实是将值在内存中保存地址位交给变量,变量去内存中获取,重新赋值,改变的就是内存地址位. 命名: 变量名由字母.数字 ...
- Spring Security (一)
一.pom.xml <!-- spring security --> <dependency> <groupId>org.springframework.secur ...
- Python Day04
一.迭代器与生成器: 迭代器(iterator): 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,迭代器的一大优点是不要求事 ...
- 解决eclipse中自带的maven搜索不到非本地第三方包问题
解决eclipse中自带的maven搜索不到非本地第三方包问题 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近使用eclipse中的maven插件时发现,在pom.xml文件中添加第 ...
- 【转帖】Python在大数据分析及机器学习中的兵器谱
Flask:Python系的轻量级Web框架. 1. 网页爬虫工具集 Scrapy 推荐大牛pluskid早年的一篇文章:<Scrapy 轻松定制网络爬虫> Beautiful Soup ...
- 改变系统自带UITableViewCell的imageView的大小
CGSize itemSize = CGSizeMake(, ); UIGraphicsBeginImageContextWithOptions(itemSize, NO,0.0); CGRect i ...
- JSTL标签库的使用
首先是四大标签库 核心 标签库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"%> 格式标签库 <%@ ta ...