Vue中rem与postcss-pxtorem的应用详解


Posted in Javascript onNovember 20, 2019

rem 布局

rem是根元素(html)中的font-size值。

rem布局不多赘述,有很多详细说明rem布局原理的资料。

简单的说,通过JS获取设备宽度动态设定rem值,以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。

新建rem.js文件,于main.js中引用

// 设计稿以1920px为宽度,而我把页面宽度设计为10rem的情况下

const baseSize = 192; // 这个是设计稿中1rem的大小。
function setRem() {
  // 实际设备页面宽度和设计稿的比值
  const scale = document.documentElement.clientWidth / 1920;
  // 计算实际的rem值并赋予给html的font-size
  document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
  setRem();
});

postcss-pxtorem

postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。

安装

新建Vue项目
安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

配置

可以通过3个地方来添加配置,配置文件皆位于vue 项目根目录中,若文件不存在可以自行建立。

其中最重要的是这个:

rootValue (Number)

  • 根元素的值,即1rem的值
  • 用于设计稿元素尺寸/rootValue
  • 比如 rootValue = 192 时,在css中width: 960px; 最终会换算成width: 5rem;

还有一些其他的配置:

propList (Array) 需要做单位转化的属性.

  • 必须精确匹配
  • 用 * 来选择所有属性. Example: ['*']
  • 在句首和句尾使用 * (['*position*'] 会匹配 background-position-y)
  • 使用 ! 来配置不匹配的属性. Example: ['*', '!letter-spacing']
  • 组合使用. Example: ['*', '!font*']

minPixelValue(Number) 可以被替换的最小像素.

unitPrecision(Number) rem单位的小数位数上限.

完整的可以看官方文档

权重

vue.config.js > .postcssrx.js > postcss.config.js

其中 postcssrc.js 和 postcss.config.js 可以热更新, vue.config.js 中做的修改要重启devServer

配置示例

vue.config.js

module.exports = {
  //...其他配置
  css: {
   loaderOptions: {
    postcss: {
     plugins: [
      require('postcss-pxtorem')({
       rootValue: 192,
       minPixelValue: 2,
       propList: ['*'],
      })
     ]
    }
   }
  },
 }

.postcssrx.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      minPixelValue: 2,
      propList: ['*'],
    }
  }
}

postcss.config.js

module.exports = {
 plugins: {
  'postcss-pxtorem': {
   rootValue: 192,
   minPixelValue: 2,
   propList: ['*'],
  }
 }
}

Reference

官方Github仓库:postcss-pxtorem
vue3.0中使用postcss-pxtorem
关于vue利用postcss-pxtorem进行移动端适配的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
微信小程序删除处理详解
Aug 16 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 #Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 #Javascript
详解Nuxt.js 实战集锦
Nov 19 #Javascript
javascript的delete运算符知识点总结
Nov 19 #Javascript
You might like
Symfony查询方法实例小结
2017/06/28 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python中的print()输出
2019/04/12 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
一套C#面试题
2013/10/09 面试题
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014年科研工作总结
2014/12/03 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python