移动端适配笔记

rem适配

rem适配原理优缺点

• rem适配原理,改变了一个元素在不同设备上所占据的css像素
• 优点: 没有破坏完美视口
• 确定: px值到rem转换太复杂

方案一(百度,淘宝方案)

• 核心过程
• 根字体=(手机横向设备独立像素*100)/设计稿宽度
• 编写样式时:
• 直接以rem为单位
• 值为:设计稿值 / 100

const dpWidth = document.documentElement.clientWidth
const rootFontSize = (dpWidth * 100) / 375
document.documentElement.style.fontSize = rootFontSize + 'px'

方案二(搜狐,唯品会方案)

• 核心过程
• 根字体 = 设备独立像素 / 10
• 编写样式时:
• 直接以rem为单位
• 值为: 设计值 / (设计稿宽度 / 10)

//参考代码1
const dpWidth = document.documentElement.clientWidth
const rootFontSize = dpWidth / 10
document.documentElement.style.fontSize = rootFontSize + 'px'

//参考代码2
(function() {
 	var styleNode = document.createElement('style')
 	var w = document.documentElement.clientWidth / 16
 	styleNode.innerHTML = "html{font-size:" + w + "px!important}"
 	document.head.appendChild(styleNode)
})()

vw适配

viewport适配

(function() {
	var targetW = 640
	var scale = document.documentElement.clientWidth / targetW
	var meta = document.querySelect("meta[name='viewport']")
	meta.content = "initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no"
})()

viewport适配原理和优缺点

• viewport适配方案中,每一个元素在不同设备上占据的css像素个数是一样的,但css像素和物理像素的比例是不一样的,等比的

• 优点:所量即所得

• 确定:没有使用完美视口