web自适应指的是设计稿给出的往往只有单一尺寸，例如1920 * 1080。但是实际的web使用者分辨率各异，所以需要做适配方案。

一般需要全局适配的，主要是H5和大屏。后台项目只需要简单做一些过渡即可，@media媒体查询完全够用。

移动端布局之postcss-px-to-viewport（兼容vant）【更新于2021/09/27】

目前全局适配的方案，比较流行的有两种 px-to-rem 和 px-to-viewport。两者思路基本一致，都是将px转为相对单位 rem 和 vw。

安装依赖

1
yarn add postcss-px-to-viewport -D

先说说刚刚看完的px-to-viewport。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// base.scss

@use "sass:math";

// 设计稿尺寸
$design_width: 1920;
$design_height: 1080;
// 最小字体
$min_font_size: 12;

// 尺寸转换
@function vw($px) {
  @return math.div($px, $design_width) * 100vw;
}

// 尺寸转换（高度）
// 通常情况下，以宽度来计算就行，除非极端要求和设计稿在任何尺寸下都是满屏（不建议）
@function vh($px) {
  @return math.div($px, $design_height) * 100vh;
}

// 字体转换
@function font($px) {
  @return math.div($px, $design_width) * 100vw;
}

通过vue.config.js 挂载到全局

1
2
3
4
5
6
7
8
9
10
module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/style/base.scss";`
      }
    }
  }
}

使用示例

1
2
3
4
5
.demo {
	width: vw(100);
	height: vw(300);
	font-size: font(30);
}

vite + vue3 实际操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vue.conifg.js
import pxtovw from 'postcss-px-to-viewport'

const loader_pxtovw = pxtovw({
  viewportWidth: 6138,
  viewportUnit: 'vw'
})

export default defineConfig({
  base: './',
  css: {
    postcss: {
      plugins: [loader_pxtovw]
    }
  },
})