当前位置: 首页
移动端Web页面适配方案(整理版)2020-02-01 11:57:00.0@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。 早期网页设计采用静态布局,通过 后面出现流式布局,使用百分比 顺应不同页面字体大小展现问题,出现了弹性布局。这种布局方案下,包裹文字的元素的尺寸采用 上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于响应式web设计,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。 [TOC] 基本概念像素px (pixel)像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的 pt (point)印刷行业常用单位,能够使用测量设备测得的长度,等于 css像素在不同屏幕上, PPI (pixel per inch)像素密度,每英寸所拥有的像素数。值越高,显示画面细节越丰富。计算公式为:,其中 和 是分辨率的宽高, 是屏幕尺寸。 DPI (dot per inch)打印设备每英寸印刷出来的点有多少个,值越高,图片越细腻。 DPR (devicePixelRatio)设备物理像素和设备独立像素比,即是指在理想布局宽度,使用多少个物理像素来渲染一个css像素。js中通过 视口
移动端涉及布局视口(Layout Viewport)、视觉视口(Visual ViewPort)和理想视口(Ideal ViewPort)。
手机屏幕特性与移动端web页面适配有关的手机屏幕特性包括 像素分辨率硬件所支持的,屏幕每行的像素 逻辑分辨率设备独立的,软件可以达到的,个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。 倍率像素分辨率 尺寸手机屏幕对角线长度换算成英寸的大小 适配方案百分比方案原理
优势
不足
rem方案原理
贴上 源码 分析 (function(win, lib) { var doc = win.document; //当前文档对象 var docEl = doc.documentElement; //文档对象根元素的只读属性 var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { //当meta中viewport的标签设置了scale时,将根据scale手动设置dpr console.warn('将根据已有的meta标签来设置缩放比例'); var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { //当meta中flexible的标签存在时,据此设置dpr var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial-dpr=([d.]+)/); var maximumDpr = content.match(/maximum-dpr=([d.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { //根据js获取到的devicePixelRatio设置dpr及scale,scale是dpr的倒数 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和3倍方案 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; } docEl.setAttribute('data-dpr', dpr); //文本字号不建议使用rem,flexible适配方案中,文本使用px作为单位,使用[data-dpr]属性来区分不同dpr下的文本字号 if (!metaEl) { //添加meta标签,设置name为viewport,content根据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); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem(){ //更新rem值 var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; //1rem = viewWidth / 10 docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } //resize与pageshow延时300ms触发refreshRem(),使用防抖函数,防止事件被高频触发可能引起性能问题 win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { //当一条会话历史纪录被执行的时候触发事件,包括后退/前进按钮,同时会在onload页面触发后初始化页面时触发 if (e.persisted) {//表示网页是否来自缓存 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); //在html文档加载和解析完成后设置body元素字体大小 if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } //浏览器有最小字体限制,css在pc上font-size是12px(移动端最小是8px), 也就是css像素是12,其DPR为1,在移动端dpr有可能为2和3,为了保证字体不变小,需要用12*dpr进行换算。 refreshRem(); //实现rem与px相互转换 flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; }})(window, window['lib'] || (window['lib'] = {})); 优势
不足
vh/vw方案原理视口是浏览器中用于呈现网页的区域,移动端的视口通常指的是 布局视口
使用 css 预处理器把设计稿尺寸转换为 vw 单位,包括 文本,布局高宽,间距 等,使得这些元素能够随视口大小自适应调整。以 // 以1080px作为设计稿基准$vw_base: 1080@function vw($px) { @return($px / 1080) * 100vw} 优势
不足
2.png rem+vw/vh方案原理
实用性
基于媒体查询的响应式设计响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕,让网站的布局和功能随用户的使用环境(屏幕大小、输出方式、设备/浏览器能力而变化),使其视觉合理,交互方式符合习惯。如使得内容区块可伸缩与自由排布,边距适应页面尺寸,图片适应比例变化,能够自动隐藏/部分显示内容,能自动折叠导航和菜单。 原理
@media only screen and (min-width: 375px){ 样式1}@media only screen and (min-width: 750){ 样式2} 优势
不足
移动端web页面适配方案中的通用问题
|