VueH5项目自适应

最新推荐文章于 2025-03-21 21:21:34 发布

刘刘哒

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量477

点赞数

分类专栏：项目实战+开发技巧文章标签： postcss 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_55371434/article/details/122447237

版权

项目实战+开发技巧专栏收录该内容

9 篇文章

订阅专栏

安装包

 npm install postcss postcss-pxtorem --save-dev
 npm i -S amfe-flexible
 npm install sass-loader@7.3.1
 npm i node-sass

 1. postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
 2. lib-flexible 用于设置 rem 基准值

html设置

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

配置

// postcss.config.js
module.exports = {
    plugins: {

        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({file}) {
                console.log(file)
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*'],
        },
    },
};