补充一个基本知识,不许笑,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. #3 Python解释器和编辑器

    前言 上文介绍了Python在不同平台的安装方法,本文将带领你了解Python解释器和编辑器的概念,并且选择出最符合自己的解释器和编辑器! 一.Python解释器 其实上文介绍的安装Python,实质 ...

  2. #1 初识Python

    前言 要说现在最时髦的编程语言是什么,那么一定是Python无疑了.让我们来一起来领略其风采吧! 一.Python介绍 Python的创始人为吉多·范罗苏姆(Guido van Rossum),被大家 ...

  3. Freemarker教程1(基本使用)

    简介 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是一个Java类库,是 ...

  4. [算法]PHP随机合并数组并保持原排序

    场景 原有帖子列表A,现需在A中推广新业务B,则需要在A列表中1:1混合B的数据,随机混合,但需保持A和B两列表原来的数据排序.具体参考下面示例的效果. 原理 获知总共元素数量N: for循环N次,取 ...

  5. es6中的部分新特性

    1.es6中变量声明可以使用let声明变量,用const声明常量.例: test:function(){ { var num=10; let num1=11; const num2=12; } con ...

  6. 设计模式之策略模式(Strategy)

    策略模式将不同算法的逻辑抽象接口封装到一个类中,通过组合和多态结合的方式来进行不同算法具体的实现. 作用 策略模式是一种定义一系列算法的方法,Strategy类层次为Context定义了一系列的可重用 ...

  7. html 字符串 生成 pdf 完美解决中文不显示

    //maven <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf< ...

  8. 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

    1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...

  9. python中文编码&json中文输出问题

    python2.x版本的字符编码有时让人很头疼,遇到问题,网上方法可以解决错误,但对原理还是一知半解,本文主要介绍 python 中字符串处理的原理,附带解决 json 文件输出时,显示中文而非 un ...

  10. fetch发送Form Data请求并携带cookie

    今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...