pc端网页屏幕自适应适配方案（rem）

# 1、安装插件

npm i lib-flexible --save
npm i postcss-px2rem --save -dev

1
2

# 2、引入lib-flexible

在 main.js 文件中

import 'lib-flexible'

# 3、删除meta标记

位置：public/index.html 中的

# 4、修改文件

位置： lib-flexible/flexible.js(node_modules)

将屏幕最大宽度改为设备宽度*dpr

# 5、配置postcss-px2rem

vue.config.js里的css预处理中的postcss插件里

css: {
      loaderOptions: {
        postcss: {
          plugins: [
            //remUnit 通常我们是根据设计图宽度十分之一来定这个值
            //假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
            require('postcss-px2rem')({
              remUnit: 80
            })
          ]
        }
      },
    },

1
2
3
4
5
6
7
8
9
10
11
12
13

或者新建postcss.config.js文件

module.exports = {
  plugins: [
    require('postcss-px2rem')({
      remUnit: 80
    })
   ]
}

1
2
3
4
5
6
7

相关资料 dpr是设备像素和与css像素的比例 iPhone8设备像素为750px1354px 当dpr为2时，css像素为375px*677px

#HTML

上次更新: 2024/01/30, 00:35:17

← PC 端使用 rem 适配屏幕尺寸大小(自适应方案) 关于 HTML 中的 input accept属性详解（文件上传）→