基于vue-cli配置lib-flexible + rem实现移动端自适应


Posted in Javascript onDecember 26, 2017

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码,引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

基于vue-cli配置lib-flexible + rem实现移动端自适应

关于importLoaders:如若有疑问,请参考webpack深入与实战4-4

2017.12.8更新说明:是否需要配置importLoaders,可参考最底部的说明。

基于vue-cli配置lib-flexible + rem实现移动端自适应

px2rem 用法

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个

在px后面添加/*no*/,不会转化px,会原样输出。 --- 一般border需用这个

在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个

示例代码

编译前(自己写的代码)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

编译后(打包后的代码)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

重启项目,就可以愉快的用设计稿上的px了。

注意:坑

不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

更新:对外部引入css,px2rem能不能转换rem问题

2017.12.8更新:在实际运用中发现对于外部引入的css文件,有时候px2rem能正常转换,有时候又不能转换,到底是什么原因呢?试验了三种不同的css引入情况,发现第一种能正常转换,二三不能正常转换,至于原因,由于才疏学浅,还是不懂,求大神解答三种引入方式的区别。

如果明白了这些方法,就没必要再配置cssLoader的importLoaders了,因为下面的方法更容易控制外部引入的css是否需要转rem,而更改importLoaders就控制不了了,它会强制转换。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

总结

以上所述是小编给大家介绍的基于vue-cli配置lib-flexible + rem实现移动端自适应,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jqgrid 表格数据导出实例
Nov 21 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
You might like
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
护士专业推荐信
2013/11/02 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
导师工作推荐信
2015/03/27 职场文书
小学英语课教学反思
2016/02/15 职场文书
汽车销售合同文本
2019/08/08 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL