H5移动端适配
一、flexible方案(废弃)
早期viewport兼容性差,借助flexible方案(现在官方已不推荐此方案)
二、rem + viewport 方案(推荐)
第一步:设置viewport;
<meta name="viewport" content="width=device-width,initial-scale=1">
第二步:设置html的font-size
主要原理:通过设计稿和屏幕大小确定缩放比例,然后用缩放比例乘以设计稿基准字体大小,得出网页的基准字体大小
// 设置基准大小
const baseSize = 32
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例
const scale = document.documentElement.clientWidth / 750
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
window.onresize = function () {
setRem()
}
第三步:借助插件将单位px转成rem
postcss-pxtorem
三、vw + viewport 方案
设置viewport;尺寸单位借助插件转为vw(view width),此单位以设备宽度的1/100为基准
总结:
rem相比于vw方案的优点:参照物可以修改。即rm可以人为改动根元素的font-size;vw方案无法改动设备的vw
参考:
Last updated