移动端自适应rem布局
补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px)
首先,HTML 的 head 部分中加入如下代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
maximum-scale:允许浏览者缩放到的最大比例,一般设为1.0,即原始尺寸。
minimum-scale:允许浏览者缩放到的最小比例,一般设为1.0,即原始尺寸。
user-scalable:浏览者是否可以手动缩放,yes 或 no 。
然后,引入这段原生js代码
(function (doc, win) {
var docEl = doc.documentElement,
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return
};
if(clientWidth==375){
docEl.style.fontSize = '10px';
}else{
docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
}
};
if (!doc.addEventListener){
return;
} ;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度等于了375px(iphone6/6s),那么页面中html的font-size恒为10px,此时1rem=10px,如果一个div宽度是200px,既可以设为20rem。否则,页面中html的font-size的大小为:
10 * (当前页面宽度 /375)
知识点拓展解析:
1.orientationchange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。
2.documentElement 属性以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。
3.Document 对象,当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
4.事件DOMContentLoaded,当初始HTML文档被完全加载和解析时,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。另一个不同的事件load应该仅用于检测一个完全加载的页面。
DOM文档加载的步骤为
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。//DOMContentLoaded
- 加载图片等外部文件。
- 页面加载完毕。//load
在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
移动端自适应rem布局的更多相关文章
- 移动端自适应rem 布局篇
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- 移动端(阿里rem)布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端自适应rem的设置
一般所熟知的css样式大小单位有px,em. px:精确地描述元素大小,不随屏幕大小的变化而变化: em:相对于父元素的大小,如果有层层嵌套的话会导致这个值非常大或者非常小. 在写移动端页面的时候为了 ...
- 自适应rem布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- HTML5 自适应rem布局
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
随机推荐
- Java基础之循环语句、条件语句、switch case 语句
Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...
- S5PV210 串口实验(中断方式)
结合之前的串口实验(轮询方式)与中断体系分析,我们来做下中断方式的串口接收实验. start.S .global _start .global IRQ_handle _start: /* 关 Watc ...
- C++注入记事本
#include <iostream>; using namespace std; #include <windows.h>; #include <tlhelp32.h& ...
- nexus-3.2.0-01.zip安装以及如何启动服务
1. 在之前的版本中,启动nexus服务都是在cmd中输入 nexus install来安装服务,nexus start来启动服务. 2. 在nexus-3.2.0-01中,直接在nexus根目录下的 ...
- scala 基础
1.scala一些预热操作 1.1 to 是一个方法,()可以进行 参数传递,map()把每一个元素取出来进行相应的操作, print(1.to(10).map(_*10)) 结果 Vector ...
- Why is one loop so much slower than two loops?
Question: Suppose a1, b1, c1, and d1 point to heap memory and my numerical code has the following co ...
- JS之iscroll.js的使用详解
入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...
- codechef QCHEF(不删除莫队)
题意 题目链接 给出长度为\(n\)的序列,每次询问区间\([l, r]\),要求最大化 \(max |x − y| : L_i ≤ x, y ≤ R_i and A_x = A_y\) Sol 标算 ...
- SG Input 软件安全分析之fuzz
前言 前面介绍了通过静态读代码的方式去发现问题,这里介绍两种 fuzz 目标软件的方式. 相关文件 链接:https://pan.baidu.com/s/1l6BuuL-HPFdkFsVNOLpjUQ ...
- python同步原语--线程锁
多线程锁是python多种同步原语中的其中一种.首先解析一下什么是同步原语,python因为GIL(全局解析锁)的缘故,并没有真正的多线性.另外python的多线程存在一个问题,在多线程编程时,会出现 ...