移动端适配方案#

rem等比适配#

xiaomi商城触屏版使用的就是这个方案

1. 统一视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. 一般UI设计稿都是按照750px设计。假设一个元素的宽度是375px，那么按照比例，这个元素在任何宽度的设备都应占整体宽度的1/2。
3. 设置html元素的font-size，一般为设备宽度的1/10。

function resetHtmlFont() {
  // 获取html对象
  document.documentElement.style.fontSize = screen.width / 10 + 'px'
}

resetHtmlFont()
window.onresize = resetHtmlFont

4. 元素的大小计算 使用750像素宽度的ui稿

弊端#

可读性比较差 ，一般保留px源码，通过构建工具转换。

媒体监听适配#

不是等比缩放，是布局在不同设备上合理的表现。

1. 统一视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. 一般移动端划分可按照750px

@media screen and (max-width: 750px) {
  // 移动端样式可在这里进行编写或覆盖
}

vw,vh方案#

vw为比例单位，1vw为窗口的1%，实现方案原理和rem方案差不多。