自适应rem.js
(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的更多相关文章
- 移动端rem.js的使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...
- 移动端rem.js使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
- rem js 自适应布局
(function(doc, win) { resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//o ...
- 移动端自适应rem 布局篇
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- 改变字体大小实现自适应之js方案A
一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...
- 最佳移动端h5自适应rem适配方案
一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...
随机推荐
- UOJ #449. 【集训队作业2018】喂鸽子
UOJ #449. [集训队作业2018]喂鸽子 小Z是养鸽子的人.一天,小Z给鸽子们喂玉米吃.一共有n只鸽子,小Z每秒会等概率选择一只鸽子并给他一粒玉米.一只鸽子饱了当且仅当它吃了的玉米粒数量\(≥ ...
- 用golang写了个统计各单位报送的信息数量的微服务
代码很乱,bug很多,将就着看吧.参考了很多网上代码,只能说声感谢了. //cjl.ZongHeInfo.1.0 //目的:对各部门报上来的信息数量进行排名 //思路:预计一年信息量不超过100M,全 ...
- FLIR 相机采集程序
https://www.ptgrey.com/Downloads/GetSecureDownloadItem/11048 Grasshopper3 4.1 MP Mono USB3 Vision (C ...
- elementUi、iview、ant Design源码button结构篇
在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...
- this直接加在函数或者是 “原型”对象的区别
如果加在函数上,可以用函数直接调用,如果是加在原型对象时,那就的创建新对象,才能使用,最重要的是影响继承 直接加在函数上的,不能被新对象继承
- yarn 在Vue框架中的常用命令
初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...
- Module build failed: Error: Cannot find module 'babel-runtime/core-js/get-it
npm i babel-loader@7.1.5 -D
- sax
<?xml version="1.0" encoding="UTF-8"?> <beauties> <beauty> < ...
- Power BI For Competition
It's traditional report design, I'm insufficient for designing that if had a designer to help me wil ...
- 单元测试之Fixture
声明: 作者:zhaojun 创建日期:2017-08-04 更新日期:2017-08-07 一.什么是Fixture,Fixture有什么作用,为什么需要使用Fixture # 下载 pip i ...