移动端适配 使px自动转换rem


Posted in HTML / CSS onAugust 26, 2019
  • 先安装postcss-pxtorem: npm install postcss-pxtorem --save-dev 进行安装
  • 通过屏幕的变化,设置动态根元素 font-size :

移动端适配 使px自动转换rem 

我写在vue的html中

function setRem () {
        let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth;  //检测html的屏幕宽度和body的屏幕宽度
        document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //设置font-size在750屏幕下的尺寸为100px,这样转换的rem可以一目了然之前是多少px的。开发屏幕尺寸自己选,3.2的320屏幕宽也可以。
      }
      setRem();
      window.onresize = function () {   //浏览器尺寸变化进行触发window.onresize函数,然后触发函数setRem()
        setRem()
      }

-然后在 .postcssrc.js 中进行 postcss-pxtorem 配置( .postcssrc.js是脚手架自动生成文件。配置完,要重新npm run dev 运行 ):

移动端适配 使px自动转换rem 

红圈内的需要配置的,剩下的是自带的 :
 

移动端适配 使px自动转换rem 

'postcss-pxtorem': {
  rootValue: 100,  //根元素大小设置,也就是html的font-size大小
  unitPrecision: 5,  //保留rem小数点多少位
  propList: ['*'],    //  是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']  
  selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
  replace: true,  //这个真不知到干嘛用的。有知道的告诉我一下
  mediaQuery: false,  //媒体查询( @media screen 之类的)中不生效
  minPixelValue: 12  //px小于12的不会被转换

    }

配置完了可以重新运行了npm run dev 
 

移动端适配 使px自动转换rem 

200px的宽高
 

移动端适配 使px自动转换rem

200px变成2rem 配置的100px为font-size。rootValue为100

移动端适配 使px自动转换rem 

设置class名为radius的样式不被转换
 

移动端适配 使px自动转换rem 

总结

以上所述是小编给大家介绍的移动端适配 使px自动转换rem,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
You might like
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
理解JS事件循环
2016/01/07 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
django主动抛出403异常的方法详解
2019/01/04 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
化工工艺专业求职信
2013/09/22 职场文书
初中数学教学反思
2014/01/16 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
单位租房协议书范本
2014/12/04 职场文书
自书遗嘱范文
2015/08/07 职场文书
MySQL注入基础练习
2021/05/30 MySQL
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript