欢迎加QQ交流：
加
油
！
2
0
2
3

vue + vite pc端窗口低于多少(比如750)时dom自适应。

先看效果：

上面两个图对比，明显看出下面图在窗口缩小时，dom包括文字在等比例缩小。 

 

方法：

1.   npm install lib-flexible postcss-pxtorem  

2.  package.json 文件里添加以下代码：（rootValue: 55   可根据自己适应窗口大小改变）

"postcss": {
    "plugins": {
      "postcss-pxtorem": {
        "rootValue": 55,
        "propList": [
          "*"
        ]
      }
    }
  }

如图：

 

3.  新建 一个 vue.config.js 文件添加以下代码（vue.config.js 文件和package.json 同级， 如果已有此文件将不用新创建）：


// 引入等比适配插件
const px2rem = require('postcss-px2rem')
 
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize
  remUnit: 16
})
 
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
 
 
4.  main.js 入口文件引入 
 
import 'lib-flexible/flexible.js'
 
5.  注释掉 index.html   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
弊端：内联样式不管用。logo图片是内联样式，所以图片大小没变
posted @ 2022-09-27 11:17  常安·  阅读(172)  评论(0)    收藏  举报