移动端自适应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自适应,不 ...
随机推荐
- #3 Python解释器和编辑器
前言 上文介绍了Python在不同平台的安装方法,本文将带领你了解Python解释器和编辑器的概念,并且选择出最符合自己的解释器和编辑器! 一.Python解释器 其实上文介绍的安装Python,实质 ...
- #1 初识Python
前言 要说现在最时髦的编程语言是什么,那么一定是Python无疑了.让我们来一起来领略其风采吧! 一.Python介绍 Python的创始人为吉多·范罗苏姆(Guido van Rossum),被大家 ...
- Freemarker教程1(基本使用)
简介 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是一个Java类库,是 ...
- [算法]PHP随机合并数组并保持原排序
场景 原有帖子列表A,现需在A中推广新业务B,则需要在A列表中1:1混合B的数据,随机混合,但需保持A和B两列表原来的数据排序.具体参考下面示例的效果. 原理 获知总共元素数量N: for循环N次,取 ...
- es6中的部分新特性
1.es6中变量声明可以使用let声明变量,用const声明常量.例: test:function(){ { var num=10; let num1=11; const num2=12; } con ...
- 设计模式之策略模式(Strategy)
策略模式将不同算法的逻辑抽象接口封装到一个类中,通过组合和多态结合的方式来进行不同算法具体的实现. 作用 策略模式是一种定义一系列算法的方法,Strategy类层次为Context定义了一系列的可重用 ...
- html 字符串 生成 pdf 完美解决中文不显示
//maven <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf< ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
- python中文编码&json中文输出问题
python2.x版本的字符编码有时让人很头疼,遇到问题,网上方法可以解决错误,但对原理还是一知半解,本文主要介绍 python 中字符串处理的原理,附带解决 json 文件输出时,显示中文而非 un ...
- fetch发送Form Data请求并携带cookie
今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...