主题 HTML
移动端页面开发适配 rem布局原理

什么是适配,为什么要适配

我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配。

需要知道的一些概念:

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元,可以理解为我们平时说的分辨率;

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如 css像素),然后由相关系统转换为物理像素,在这里可以理解为我们说的视觉视口的大小;

所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。

设备像素比(device pixel ratio)

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:

设备像素比 = 物理像素 设备独立像素 在某一方向上,x方向或者y方向

设备像素比也是设备生产的时候设置好的,在javascript中,可以通window.devicePixelRatio获取到当前设备的dpr。

视口(viewport)

pc端视口指浏览器窗口内的内容区域,不包含工具条,滚动条.

移动浏览器中视口分为几种情况

metaname=viewportcontent=“width=device-width,minimum-scale=1.0,maximum-scale=1.0”中content所设置的视口,称为布局视口,最大值由浏览器厂商规定 ,可以document.documentElement.clientWidth获取其宽度.

而我们看到的浏览器的窗口,网页区域的大小,称为视觉视口,用css像素表示(设备逻辑像素)

rem

rem是css3 的一个长度单位 ,相对文档跟元素 html;比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小;

常用的方案:

固定高度,宽度自适应(百分比,em)

使用 rem布局

下面总结了网易 淘宝首页使用rem的方案

网易的做法:

1) 将布局适口设置为视觉适口,不进行缩放,即理想适口。

meta name=viewportcontent=initial-scale=1,maximum-scale=1, minimum-scale=1”

2) 以设计稿分辨率为基准,取100px为font-size的参照,那么body元素的宽度就可以设置为width6.4rem(640100),当我们将布局视口设置为320时,于是html的 font-size=deviceWidth 6.4。

3) 通过document.documentElement.clientWidth获取 deviceWidth;

4) 当页面的dom ready后设置html font-size,

document.documentElement.style.fontSize =document.documentElement.clientWidth 6.4 + ‘px’
5) 通过 mediaQuery 设置字体大小,字体大小不可以使用rem,原因是误差太大。

以640的设计稿为例最终的设置html font-size代码如下,布局时拿设计稿标注的尺寸除以100,就是rem的值,相当简单啊

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth 6.4 + 'px';
这里if(deviceWidth 640) deviceWidth = 640; 是因为当deviceWidth大于640时物理分辨率已经大于1280(取决于 dpr ),应该去访问pc的网站;

淘宝的做法:

原理

1) 通过dpr设置缩放比,实现布局视口大小,

var scale = 1 devicePixelRatio;
document.querySelector('meta[name=viewport]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
2) 动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth 10 + ‘px’;
这里的意思是,clientWidth 10 得到是布局视口下的rem基准值(以iphone6为例 1rem=75px),那么设计稿正好也是 750,所以对应的关系 clientWidth 10==设计稿的尺寸x, 那么x=设计稿的尺寸rem基准值。

如果是iphone6 plus rem基准值等于clientWidth 10 等于124.2,那么x=750124.2。

关于具体的实现 淘宝提供了一个开源的方案lib-flexible: httpsgithub.comamfelib-f... ;

具体逻辑 :

1)判断head中是否设置了viewport,如果有设置,按照已有viewport 设置缩放比;

if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(initial-scale=([d.]+));
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 scale);
}
}
2)如果没有设置meta viewport,判断是否设置dpr,如果有,通过dpr计算缩放scale。

var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(initial-dpr=([d.]+));
var maximumDpr = content.match(maximum-dpr=([d.]+));maximum 设置最大值,与initial的值比较,取最小值;
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 dpr).toFixed(2));
}
}
3)如果 dpr &scale都没有设置,那么就通过设备的dpr设置起缩放 scale,

if (!dpr && !scale) {meta[name=viewport]&&meta[name=flexible]都不存在。

var isAndroid = win.navigator.appVersion.match(androidgi);
var isIPhone = win.navigator.appVersion.match(iphonegi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio = 3 && (!dpr dpr = 3)) {
dpr = 3;
} else if (devicePixelRatio = 2 && (!dpr dpr = 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 dpr;
}
4)得到scale之后 ,如果meta 的viewport不存在,那么就创建一个meta[name=“viewport”],将scale配置进去。

metaEl = doc.createElement('meta');

metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(metaEl);

}
5)动态改写html的font-size

var width = docEl.getBoundingClientRect().width;获取html的宽度

if (width dpr 540) {判断屏幕逻辑像素大于540时,取540
width = 540 dpr;
}
var rem = width 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
总结:

使用rem布局,实质都是通过动态改写html的font-size基准值,来实现不同设备下的良好统一适配;

网易与淘宝不同 的地方是 ,网易将布局视口设置成了 视觉视口,淘宝将布局视口设置成了物理像素大小,通过 scale缩放嵌入了 视觉视口中;

容器元素的字体大小都不使用rem,需要额外的media查询;

移动端页面开发适配 rem布局原理的更多相关文章

  1. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  2. rem布局原理深度理解(以及em/vw/vh)

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

  3. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  4. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  5. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

  6. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  7. 移动端页面怎么适配ios页面

    1.viewport 简单粗暴的方式:<meta name="viewport" content="width=320,maximum-scale=1.3,user ...

  8. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  9. 手机端页面自适应:rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

随机推荐

  1. JavaScript的XMLHttpRequest对象

    ajax的核心技术是XMLHttpRequest对象,简称XHR. //支持IE7及更高的版本 function createXML() { if(typeof XMLHttpReqquest!=&q ...

  2. Python-一些实用的函数

    一,返回值为bool类型的函数 1.any()函数 any(iterable)->bool 当迭代器中有一个是Ture,则返回Ture:若interable=NUll,则返回False. > ...

  3. 基于Prism.Windows的UWP开发备忘

    以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项 ...

  4. IDEA第四章----配置模板

    idea提供很多模板从而提高编写代码的效率,比如说一些经常用的代码及生成文件时的模板. 第一节:实时代码模板 顾名思义,实时代码模板是指在编写程序中输入一段固定的字母可以快速生成自己想要的代码,例如: ...

  5. git 利用分支概念实现一个仓库管理两个项目

    需求描述:开发了一个网站,上线之际,突然另一个客户说也想要个一样的网站,但网站的logo和内部展示图片需要替换一下,也就是说大部分的后台业务逻辑代码都是一致的,以后升级时功能也要保持一致:刚开始想反正 ...

  6. JQuery实现通过点击标题切换字体

    这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换,其中wrapInner函数是为了在$author元素的内部添加b标签. 切换回正常字体是通过将内容转化为纯文本形式,再替换元素内 ...

  7. 深入浅出Node.js(一):什么是Node.js(转贴)

    以下内容转自:http://www.infoq.com/cn/articles/what-is-nodejs/ 作者:崔康 [编者按]:Node.js从2009年诞生至今,已经发展了两年有余,其成长的 ...

  8. mysql,oracle,sqlserver使用jdbc连接数据库总结

    jdbc连接数据是javaweb开发的一个重点,今天特此来总结一下,加深记忆. jdbc连接数据库一共分为三步: 1:加载驱动 需要去下载各自的驱动jar包,可以去网上搜索一下. 模板:加载驱动程序: ...

  9. 整合最优雅SSM框架:SpringMVC + Spring + MyBatis

    我们看招聘信息的时候,经常会看到这一点,需要具备SSH框架的技能:而且在大部分教学课堂中,也会把SSH作为最核心的教学内容. 但是,我们在实际应用中发现,SpringMVC可以完全替代Struts,配 ...

  10. Lock使用实例

    using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; usin ...