rem响应式布局

根据Vant3文档

postcss-pxtorem：我们在开发的时候写的是px单位，webpack编译时会将其变为rem【需要设置一个基准值】
lib-flexible：用于设置基准值
Vant组件库按375px设计稿，则其基准值37.5px；若设计稿750px，则其基准值75px

1. 安装插件

npm install postcss postcss-pxtorem --save-dev

npm i -S amfe-flexible
1
2
3

2. 新建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};
1
2
3
4
5
6
7
8

3. main.js引入Vant时记得引入flexible，基准值才会生效

import 'amfe-flexible'
1

另App.style

html,body{
  min-height: 100%;
  overflow-x: hidden;
  background: #f4f4f4;
}
#app {
  margin: 0 auto;
  /* max-width: 750px; ---写在这变成rem就不准了*/
  background: #fff;
}
1
2
3
4
5
6
7
8
9
10

4. 新建通用工具类utils.js，设置随窗口大小变化font-size最大值

// 处理最大宽度
export const handleMaxWidth = function handleMaxWidth() {
    let HTML = document.documentElement,
        app = document.querySelector('#app'),
        size = parseFloat(HTML.style.fontSize);
        console.log(size)
    if (size > 75) {
        HTML.style.fontSize = '75px';
        app.style.width = '750px';
        return;
    }
    app.style.width = '100%';
    // app.style.minHeight = HTML.clientHeight + 'px';
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5. main.js监听窗口大小变化

// 处理最大宽度
import {handleMaxWidth } from './assets/utils.js'
handleMaxWidth()
window.addEventListener('resize',handleMaxWidth)
1
2
3
4