vue3移动端项目使用postcss-pxtorem实现px自动转换为rem及amfe-flexible是配置可伸缩布局

27天前   阅读:191   分类:前端    标签: Vue

简介:postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位。amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10.

使用方法:

1、安装

使用yarn 安装:

yarn add postcss-pxtorem@5.1.1 amfe-flexible -S

或使用npm安装

npm install postcss-pxtorem@5.1.1 amfe-flexible --save

2、创建vue.config.js

在根目录创建vue.config.js文件,添加如下配置代码

module.exports={
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 16, //换算基数, 
                        unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
                        propList: ['*'],
                        exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
                        selectorBlackList: ['.van'], //要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
                        mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                        minPixelValue: 1 //设置要替换的最小像素值
                    })
                ]
            }
        }
    }
}

3、引入

在main.js文件中加入以下代码

import 'amfe-flexible'

4、使用

<template>
 <div class="app">这是app组件</div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
.app{ width: 500px; height: 500px; background: red}
</style>

5、重启项目,使其生效

npm run serve
【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/1076.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×