自适应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 ...
随机推荐
- 关于Net core 的https 设置小知识
今天我是遇到了一个蛋疼的问题, 就是https 协议, 在创建项目的时候, 我勾选了for https (如下图), 然后我就在startup.cs 和Kestrel 各种设置还是全部走https ...
- Android布局理解
参考菜鸟教程,原文请查看:https://www.runoob.com/w3cnote/android-tutorial-linearlayout.html 1.FrameLayout(帧布局) 帧布 ...
- C++ WMI获取系统硬件信息(CPU/DISK/NetWork etc)
官网找到一个例子,根据例子修改下可以获取很多信息 #define _WIN32_DCOM #include <iostream> using namespace std; #include ...
- Linux下Nginx配置阿里云 SSL证书实现HTTPS访问
这篇文章主要介绍了nginx配置ssl证书实现https访问的示例 1.服务器系统:Centos 2. 阿里云申请SSL证书 选择“免费版DV SSL”,点击立即购买: 下载证书 列表中找到已签发的证 ...
- vue.js实战——props数据验证（自定义构造器检测）
Vue.component('my-component',{ props:{ //必须是数字类型 propA:Number, //必须是字符串或数字类型 propB:[String,Number], ...
- Netty的基本使用
Gradle 的优点 原文:https://blog.csdn.net/achenyuan/article/details/80682288 1. 按约定声明构建和建设: 2. 强大的支持多工程的构 ...
- mysql-笔记-类型转化
1 concat() 隐式转化为字符串 2 cast( 1 as char) 显示转化 3 比较中的隐式转化 null 与任何值比例都是null : 除了使用 null-safe <=> ...
- VisualStudio神级插件Resharper技巧基础入门到骨灰玩家使用全教程+Resharper性能优化
原文地址:https://www.masuit.com/21/resharper 破解地址:https://www.masuit.com/20/resharper 官方文档:https://www.j ...
- 【转载】利用window.performance.timing进行性能分析
利用window.performance.timing进行性能分析 性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备 ...
- React Fullpage
之前项目需要,单独拿出来做了个demo 目前仅支持收尾加autoheight github地址:https://github.com/zlinggnilz/React-Fullpage