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 相关文章推荐
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
Angularjs过滤器使用详解
May 25 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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 验证码实例代码
2010/06/01 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
Python+DeOldify实现老照片上色功能
2022/06/21 Python