web 移动端项目适配
前置
这篇文章能够帮助你了解 web 移动端适配。如有不足，恳请指点一二！
单位
- 分辨率: 单位面积显示像素的数量，和 css 无关
- DPI：图像每英寸长度内的像素点数（1 英尺=30.48 厘米）
- css 的 px: 96 DPI 的单像素的物理大小
- 物理像素：在由一个数字序列表示的图像中的一个最小单位
- dpr: 一个 CSS 像素的大小相对于一个物理像素的大小的比值
- rem: 1rem = 根元素的字体大小 * 1
《css 权威指南》对于 css 像素的解释：
基准值
html {
font-size: 12px;
}
div {
width: 2rem;
}
这里根元素的字体大小 12px，称之为基准值。这时 div 的 width 为 2rem = 12px\*2 = 24px. 通常设计稿都以 px 为单位，如果一个块的高度为 50px，转换为 rem 非常简单，即 50px/12px rem。如果在不同屏幕下设置不同基准值，就能实现简单的伸缩适配的目的了。
设计搞
移动端设计稿通常以 iphone6 屏幕为基准。iphone6 屏幕宽度为 375px，在进行适配时通常以 37.5px 为基准值，为什么不直接以 375px 为基准值呢？因为这个值太大了，所以除以 10。为什么要以屏幕宽度为基准值呢？为了方便适配，在 iphone4/5 下以 320px / 10 = 32px 作为基准值就好了，其他设备类比。
如何做
在不同屏幕下设置不同基准值，就能实现缩放适配的目的。以下几种方法都能实现。
- 利用 css 媒体查询（Media Queries）
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
html {
font-size: 37.5px;
}
}
/* ... */
- 利用简易的 JavaScript
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'
- 使用 flexible.js，这是当前常用的方式
flexible
amfe-flexible
1.使用
-
通过内联的方式引入
-
使用 npm:
npm i amfe-flexible2.如果使用 webpack 构建项目，使用 px2rem-loader。这样设计稿上元素是多少 px 就写多少 px 。注意：要将基准值设置为 37.5 的二倍 75，因为设计稿的宽度一般是 iphone6 宽度的二倍。loader 配置：
{
loader: 'px2rem-loader',
options: {
remUni: 75,
remPrecision: 8
}
}
如果直接引入的 js，可以使用 vscode 扩展 px2rem，同样你需要打开 vscode settings 并设置基准值。书写时设计稿上元素是多少 px 就写多少 px，插件会帮你在书写时自动转换成对应的 rem。
"px2rem.rootFontSize": 75,
"px2rem.fixedDigits": 6,
源码解释
;(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// Document.documentElement： 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。
// window.devicePixelRatio（dpr）： 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。
// 调整 body 字体大小
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + 'px'
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
// DOMContentLoaded：当纯HTML被完全加载以及解析时，DOMContentLoaded 事件会被触发
}
}
setBodyFontSize()
// 设置基准值
// 1rem = clientWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// 调整页面大小时重置 rem
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
// pageshow：当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)
if (e.persisted) {
// persisted：网页是否来自缓存
setRemUnit()
}
})
// 检测 0.5px 支持
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
// transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
})(window, document)
lib-flxible
lib-flxible 是更为完善的版本。
npm i lib-flxible
源码
;(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) {
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) {
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) {
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
}
docEl.setAttribute('data-dpr', dpr)
if (!metaEl) {
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() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = 540 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
win.addEventListener(
'resize',
function () {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
},
false
)
win.addEventListener(
'pageshow',
function (e) {
if (e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
},
false
)
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
)
}
refreshRem()
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'] = {}))
缺陷
- 建议字体大小依然使用 px，由于使用 rem 将导致在不同移动设备中字体大小不同，可能出现 13px 和 15px 这样奇怪的字体尺寸
- 难以处理点阵字体，点阵字体也叫位图字体。由于位图的缘故，点阵字体很难进行缩放，特定的点阵字体只能清晰地显示在相应的字号下，否则文字只被强行放大而失真字形，产生成马赛克式的锯齿边缘。
那么如何适配字体呢？当你不使用任何 css 预处理器时这样做：
.item {
font-size: 12px;
}
[data-dpr='2'] .item {
font-size: 24px;
}
[data-dpr='3'] .item {
font-size: 36px;
}
如果使用 scss，其他 css 预处理器类比即可：
// 定义一个混合宏(或者使用函数)，在设置字体大小时直接引入即可
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr='2'] & {
font-size: $font-size * 2;
}
[data-dpr='3'] & {
font-size: $font-size * 3;
}
}
.item {
@include font-dpr(16px);
}
除此之外，可能会在移动端项目中出现很少见的大标题，完全可以直接使用 rem，因为我们希望这样的大标题也能跟随不同的设备进行缩放。而不是使用 px，在较小尺寸的设备由于标题过大而显示不全（处理成...）或者换行。
使用 viewport
使用 flexible.js 我们需要在项目中嵌入 JavaScript，让我们尝试一种新的方式。
视口单位
- vw : 1vw 等于视口宽度的 1%
- vh : 1vh 等于视口高度的 1%
- vmin : 选取 vw 和 vh 中最小的那个
- vmax : 选取 vw 和 vh 中最大的那个
看到这里你可能对 vmin 和 vmax 有些疑问，这里给出一小段解释你会豁然开朗：使用 vw、wh 设置字体大小在竖屏和横屏状态下显示的字体大小是不一样的，使用 vmin 和 vmax 使得文字大小在横竖屏下保持一致。
注：IE9 仅支持使用 vm 代替 vmin，IE 6-11 均不支持 vmax。
第一种方式
上文已经说过设计稿通常以 iphone6(375) 的尺寸作为基准。如果使用 scss:
@function vw($px) {
@return ($px / 375) * 100vw;
}
在使用时仅将设计稿上对应的 px 传入函数即可：
.item {
padding: vw(15) vw(10) vw(10);
width: vw(40);
font-size: vw(10);
}
Tip: 不用设备的宽度变化会导致自动伸缩，伸缩布局就实现了。
第二种方式
具体思路：给根元素打字体大小使用单位 vw, 其他地方使用 rem。设备宽度变化 -> vw 实际渲染出来的大小改变 = 根元素字体大小改变 -> rem 实际渲染出来的大小变换 = 全局根据设备宽度缩放。看到这里你又会有疑问了，vw 本身就能缩放了，何必再绕上一圈？下面有一个例子，假设设计稿依然以 iphone6 尺寸作为基准：
例子
@function rem($px) {
@return ($px / 75) * 1rem;
}
html {
font-size: (75 / (750 / 2)) * 100vw;
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
.item {
width: rem(50);
font-size: rem(10);
}
看完这段代码你就明白了，原来我们利用 rem 只会根据根元素字体大小进行缩放这一特点，给根元素通过媒体查询限制其字体的最大值与最小值，就能在全局实现修复一些元素的过大或过小产生的瑕疵。同时，这样做还有一个好处，它能使原来使用 flexible.js 的项目轻易地迁移到 vw+rem。
