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扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python 提取文件的小程序
2009/07/29 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
高二英语教学反思
2014/01/19 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Python 图片添加美颜效果
2022/04/28 Python
python中使用redis用法详解
2022/12/24 Redis