vue-cli3移动端适配postcss-px2rem

最新推荐文章于 2024-07-25 09:21:56 发布

77不7

最新推荐文章于 2024-07-25 09:21:56 发布

阅读量1.1k

点赞数

分类专栏：技术分享文章标签：移动端适配 vue-cli3 rem postcss

本文链接：https://blog.csdn.net/plm609337931/article/details/103383443

版权

本文介绍了如何在vue-cli3项目中利用postcss和px2rem实现移动端适配。首先在public/index.html中进行设置，然后通过vw/vh单位配合动态计算font-size。接着安装并配置postcss，修改vue.config.js，设置转换比例。最后，需要注意postcss只能转换css中的px到rem，内联样式不会被处理，可以使用`Px`或`PX`避免转换。

摘要由CSDN通过智能技术生成

1.public/index.html中增加：

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

2.修改页面font-size:

以往都是用js监听页面宽度来动态计算设置根元素font-size
现在有了vw和vh这个神奇的单位，我们完全可以这样。。。

<html lang="en" style="font-size: 10vw">

3.安装postcss

npm install postcss-px2rem --save

4.配置postcss:

修改vue.config.js，增加postcss部分（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建vue.config.js文件）

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}