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 相关文章推荐
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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+memcache实现的网站在线人数统计代码
2014/07/04 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php如何获取文件的扩展名
2015/10/28 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
BootStrap中
2016/12/10 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python实现数独算法实例
2015/06/09 Python
Python线性方程组求解运算示例
2018/01/17 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python 支付整合开发包的实现
2019/01/23 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python SOCKET编程基础入门
2021/02/27 Python
大学毕业的自我鉴定
2013/10/08 职场文书
学生个人自我鉴定
2014/03/26 职场文书
中等生评语大全
2014/05/04 职场文书
心理咨询承诺书
2014/05/20 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Nginx四层负载均衡的配置指南
2021/06/11 Servers
PHP 时间处理类Carbon
2022/05/20 PHP