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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JS严格模式知识点总结
Feb 27 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JS实现给数组对象排序的方法分析
Jun 24 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发电子邮件
2006/10/09 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
简明json介绍
2008/09/28 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python ETL工具 pyetl
2020/06/07 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
音乐学专业求职信
2014/07/22 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
领导班子整改方案
2014/10/25 职场文书
开平碉楼导游词
2015/02/06 职场文书
护士个人总结范文
2015/02/13 职场文书
《刷子李》教学反思
2016/02/20 职场文书
教你用python实现12306余票查询
2021/06/30 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Python Numpy库的超详细教程
2022/04/06 Python