vue打包的时候自动将px转成rem的操作方法


Posted in Javascript onJune 20, 2018

px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是转成rem却不会设置rem的信息

安装 flexible

npm i lib-flexible -S

然后在main.js中引入

import 'lib-flexible/flexible'

直接引入的文件需要有优先与引用的组件

安装px2rem-loader

npm i px2rem-loader -D

在build的utils.js中找到cssLoader添加一下代码

const px2remLoader = {
  loader: 'px2rem-loader',
  option: {
   remUnit: 75 // 设计图宽度÷10
  }
 }

找到generateLoaders修改一下代码

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

具体如下

vue打包的时候自动将px转成rem的操作方法

然后重启项目

注意

因为网页识别的精度有限,如果是1px转成rem之后,会出现不识别的状态,主要是在边框的时候;

这时候可以在css语句后面加上/* no */ 表示此行语句不转换;如

.tabs div{
    width: 218px;
    height: 70px;
    line-height: 72px;
    text-align: center;
    border: 1px solid #dcdcdc;/* no */
  }

总结

以上所述是小编给大家介绍的vue打包的时候自动将px转成rem的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery indexOf使用方法
Aug 19 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
javascript实现留言板功能
Feb 08 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 #Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
英语故事演讲稿
2014/04/29 职场文书
教师个人读书活动总结
2014/07/08 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书