摘要:移动端页面开发适配布局原理什么是适配,为什么要适配我们拿到的设计图一般是以,,分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同,视口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处
移动端页面开发适配 rem布局原理 什么是适配,为什么要适配
我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,视口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配。
需要知道的一些概念:物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,可以理解为我们平时说的分辨率。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素,在这里可以理解为我们说的视觉视口的大小;
所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。
设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
设备像素比也是设备生产的时候设置好的,在javascript中,可以通window.devicePixelRatio获取到当前设备的dpr。
视口(viewport)pc端视口指浏览器窗口内的内容区域,不包含工具条,滚动条.
移动浏览器中视口分为几种情况:
而我们看到的浏览器的窗口,网页区域的大小,称为视觉视口,用css像素表示(设备逻辑像素)
remrem是css3 的一个长度单位 ,相对文档跟元素 html;比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小;
常用的方案:固定高度,宽度自适应(百分比,em)
使用 rem布局
下面总结了网易 淘宝首页使用rem的方案 网易的做法:1) 将布局适口设置为视觉视口,不进行缩放,即理想视口。
这里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=750/124.2。关于具体的实现 淘宝提供了一个开源的方案lib-flexible:https://github.com/amfe/lib-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(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); 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查询;
参考文章链接:
http://www.cnblogs.com/lyzg/p...;
http://mobile.51cto.com/web-4...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115325.html
摘要:移动端页面开发适配布局原理什么是适配,为什么要适配我们拿到的设计图一般是以,,分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同,视口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处 移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端...
摘要:随着移动端的发展,在手机上看电脑端的页面已成为非常普及现象。方案一固定高度,使其宽度自适应这也是我接触移动端适配第一次使用的方案。 不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件),对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的,这次的快应用的手机厂...
摘要:随着移动端的发展,在手机上看电脑端的页面已成为非常普及现象。方案一固定高度,使其宽度自适应这也是我接触移动端适配第一次使用的方案。 不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件),对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的,这次的快应用的手机厂...
阅读 3657·2021-11-11 10:58
阅读 2401·2021-09-22 15:43
阅读 2833·2019-08-30 15:44
阅读 2139·2019-08-30 13:08
阅读 1793·2019-08-29 17:28
阅读 832·2019-08-29 10:54
阅读 584·2019-08-26 11:46
阅读 3460·2019-08-26 11:43