移动端屏幕适配

一、移动端屏幕适配与响应式布局的关系

	移动端适配	响应式布局
终端	仅移动端	PC端和移动端
常用单位	宽高：rem / % 字体：px	宽：% 高、字体：px
宽和高	宽和高都随着屏幕大小变化 等比例	宽度变化，高度不变 非等比例

二、简单适配方案

• docEl.style.fontSize = viewWidth / ratio+ ' px '
• viewWidth = docEl.getBoundingClientRect().width || window.innerWidth
• ratio =18.75

三、通用适配方案

• dpr = window.devicePixelRatio || 1
• scale = 1 / dpr
• content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';