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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
关于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
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
python实现多线程抓取知乎用户
2016/12/12 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python和c语言哪个更适合初学者
2020/06/22 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Mysql忘记密码解决方法
2022/02/12 MySQL