前端自适应postcss-pxtorem使用介绍

本文介绍了如何在Vue项目中利用postcss-pxtorem实现前端自适应。通过安装插件,删除meta标签,导入并配置插件,结合flexible适配方案,实现像素转换。同时推荐关注"前端魔法秘籍"小程序获取更多前端技术分享。
摘要由CSDN通过智能技术生成
  1. 安装插件

    yarn add lib-flexible postcss-px2rem
    
  2. 在 public 中的 index.html 中删除 meta 标签

    flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。

  3. 在 src / main.js 中导入插件包

    // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
    import 'lib-flexible'
    
  4. 配置 vue.config.js

    module.exports = {
         
      devServer: {
         
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值