Vue项目自动转换 px 为 rem的实现方法


Posted in Javascript onOctober 29, 2018

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。

而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。

技术栈

vue-cli:使用脚手架工具创建项目。

postcss-pxtorem:转换px为rem的插件。

自动设置根节点html的font-size

因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小。

原理网上有很多文章分享,这里不具体解释。

1、创建rem.js文件

很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。ES6中每个文件都是单独的一个模块。

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

2、在main.js中引入rem.js

import './utils/rem'

引入文件后,查看页面的html节点,是否有被自动添加 font-size。

注意:完成到这一步,也就是实现了rem布局,实际开发的时候,还是需要我们去计算对应的rem值去开发。

下一步我们就配置一下webpack,自动转换px为对应的rem值。

配置 postcss-pxtorem 自动转换px为rem

1、安装 postcss-pxtorem

$ npm install postcss-pxtorem -D

2、修改 /build/utils.js 文件

找到 postcssLoader 的代码块

const postcssLoader = {
 loader: 'postcss-loader',
 options: {
  sourceMap: options.sourceMap
 }
}

修改为:

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap,
   plugins: [
    require('postcss-pxtorem')({
     'rootValue': 32,
     propList: ['*']
    })
   ]
 }
}

按照上述配置项目后,即可在开发中直接使用 px 单位开发。

例如设计给出的设计图是 750 * 1136,那么可以直接在页面中写

body {
 width: 750px;
 height: 1136px;
}

将被转换为

body {
 widht: 23.4375rem;
 height: 35.5rem;
}

总结

以上所述是小编给大家介绍的Vue项目自动转换 px 为 rem的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
js 函数调用模式小结
Dec 26 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
Javascript之String对象详解
Jun 08 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
js返回顶部实例分享
Dec 21 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
简单说说angular.json文件的使用
Oct 29 #Javascript
JS 实现获取验证码 倒计时功能
Oct 29 #Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
You might like
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php生成静态页面的简单示例
2014/04/17 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php短信接口代码
2016/05/13 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
浅析Python中的for 循环
2016/06/09 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python 元组的使用方法
2020/06/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
应聘美工求职信
2013/11/07 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
会计电算化实训报告
2014/11/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书