纵有疾风起
人生不言弃

如何在vue的web页面中像小程序中使用rpx单位做兼容

该功能基于vue-cli3;cli2的方法大差不差

准备工作:

1、postcss-px2rem-exclude(推荐) || postcss-px2rem(不推荐);2、rem.js
第一步:npm install postcss-px2rem-exclude --save//找到:postcss.config.js//在plugins新增'postcss-px2rem-exclude': {      remUnit: 37.5,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem      exclude: /node_modules|folder_name/i     //屏蔽node_modules里的css,使用postcss-px2rem不能屏蔽,所以会导致引入的一些ui变形   }
第二步:新建rem.js // 设置 rem 函数 function setRem() {     // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16     let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;     console.log(htmlWidth)         //得到html的Dom元素     let htmlDom = document.getElementsByTagName('html')[0];     if (htmlWidth >= 450) {         //设置根元素字体大小         htmlDom.style.fontSize = 22 + 'px';     } else {         //设置根元素字体大小         htmlDom.style.fontSize = htmlWidth / 20 + 'px';     } } // 初始化 setRem(); // 改变窗口大小时重新设置 rem window.onresize = function() {     setRem() }根据窗口大小动态设置根元素的size;

以上两步就可以实现小程序中rpx功能,针对设计稿为750px的移动端。

文章转载于:https://www.jianshu.com/p/c418f1429f92

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 如何在vue的web页面中像小程序中使用rpx单位做兼容

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活