移动端适配

1. 移动端适配方案

• 方案一：使用viewport
• 方案二：使用rem
• 方案三：使用flexible.js
• 方案四：使用postcss-pxtorem

2. viewport

viewport是指浏览器的可视区域，它决定了网页的最终显示效果。

viewport的设置方式有两种：

1. meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. CSS：

html {
  width: device-width;
  height: 100%;
}

• width: device-width：设置viewport宽度为设备宽度，这样可以保证页面的宽度适应不同设备的屏幕大小。
• initial-scale=1.0：设置初始缩放比例为1.0，这样可以保证页面的初始显示效果。

我们布局时，能使用 vw,vh 去作为单位，这样就可以完美适配不同设备的屏幕大小。

3. rem

rem是相对于根元素html的font-size的单位，它可以实现不同设备的适配。

使用rem的步骤：

1. 设置根元素html的font-size：

const $html = document.querySelector('html');
$html.style.fontSize = $html.clientWidth / 10 + 'px';

2. 利用rem单位来设置元素的font-size：

.item {
  font-size: 1.6rem;
}

4. flexible 方案

flexible 方案的原理是指定设计稿的宽度，然后根据 dpr 进行缩放，以达到适配不同屏幕的效果。

假设设计稿宽度为 750px，我们可以设置如下代码：

在 HTML 的 head 标签里配置 meta 如下： <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" > 。

const width = 750;
const dpr = window.devicePixelRatio || 1;
const scale = window.innerWidth / width;

let meta = document.querySelector('meta[name="viewport"]');
const content = `width=${width}, initial-scale=${scale} user-scalable=no`
if (!meta) {
  meta = document.createElement('meta');
  meta.setAttribute('name', 'viewport')
  document.head.appendChild(meta);
}
meta.setAttribute('content', content);

那么我们就可以在项目里面愉快的使用 px 啦，并且不需要任何的单位转换。

5. postcss-pxtorem

postcss-pxtorem是一个PostCSS插件，它可以将px单位转换为rem单位，实现不同设备的适配。

使用postcss-pxtorem的步骤：

1. 安装postcss-pxtorem：

npm install postcss-pxtorem --save-dev

2. 在postcss.config.js中配置postcss-pxtorem：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 1rem = 16px
      propList: ['*']
    })
  ]
}

3. 在需要适配的元素的样式中使用rem单位：

.container {
  font-size: 1.6rem;
}

6. 总结

移动端适配方案有很多，每种方案都有其优缺点，根据项目的实际情况选择适合的方案即可。