补充一个基本知识,不许笑,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文档加载的步骤为

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。

移动端自适应rem布局的更多相关文章

  1. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  2. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  3. 移动端(阿里rem)布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动端自适应rem的设置

    一般所熟知的css样式大小单位有px,em. px:精确地描述元素大小,不随屏幕大小的变化而变化: em:相对于父元素的大小,如果有层层嵌套的话会导致这个值非常大或者非常小. 在写移动端页面的时候为了 ...

  5. 自适应rem布局

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. HTML5 自适应rem布局

    (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...

  7. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  8. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  9. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

随机推荐

  1. Java基础之循环语句、条件语句、switch case 语句

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  2. S5PV210 串口实验(中断方式)

    结合之前的串口实验(轮询方式)与中断体系分析,我们来做下中断方式的串口接收实验. start.S .global _start .global IRQ_handle _start: /* 关 Watc ...

  3. C++注入记事本

    #include <iostream>; using namespace std; #include <windows.h>; #include <tlhelp32.h& ...

  4. nexus-3.2.0-01.zip安装以及如何启动服务

    1. 在之前的版本中,启动nexus服务都是在cmd中输入 nexus install来安装服务,nexus start来启动服务. 2. 在nexus-3.2.0-01中,直接在nexus根目录下的 ...

  5. scala 基础

    1.scala一些预热操作 1.1 to 是一个方法,()可以进行 参数传递,map()把每一个元素取出来进行相应的操作,  print(1.to(10).map(_*10))  结果  Vector ...

  6. 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 ...

  7. JS之iscroll.js的使用详解

    入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...

  8. codechef QCHEF(不删除莫队)

    题意 题目链接 给出长度为\(n\)的序列,每次询问区间\([l, r]\),要求最大化 \(max |x − y| : L_i ≤ x, y ≤ R_i and A_x = A_y\) Sol 标算 ...

  9. SG Input 软件安全分析之fuzz

    前言 前面介绍了通过静态读代码的方式去发现问题,这里介绍两种 fuzz 目标软件的方式. 相关文件 链接:https://pan.baidu.com/s/1l6BuuL-HPFdkFsVNOLpjUQ ...

  10. python同步原语--线程锁

    多线程锁是python多种同步原语中的其中一种.首先解析一下什么是同步原语,python因为GIL(全局解析锁)的缘故,并没有真正的多线性.另外python的多线程存在一个问题,在多线程编程时,会出现 ...