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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
js+css实现扇形导航效果
2020/08/18 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
平面设计岗位职责
2013/12/14 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
设计专业自荐信
2014/06/19 职场文书
语文教研活动总结
2014/07/02 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
业余无线电通联Q语
2022/02/18 无线电