基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应
没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px
安装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,如下图添加配置
关于importLoaders
:如若有疑问,请参考webpack深入与实战4-4
2017.12.8更新说明:是否需要配置importLoaders
,可参考最底部的说明。
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>
转自:https://segmentfault.com/a/1190000011883121?_ea=3019761
基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应的更多相关文章
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- 前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台
基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约.大气,减少初学者或开发者不必要的工作量.后台维护采用的springboot+shiro的方式,为广大爱好者提供展示 ...
- 基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...
- vue cli 配置信息说明
摘自csdn http://blog.csdn.net/hongchh/article/details/55113751
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- 手淘适配-flexible
目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是 ...
随机推荐
- iOS12系统应用开发发送邮件
iOS12系统应用开发发送邮件 消息分享是应用社交化和营销的重要途径.除了开发者自己搭建专有的消息分享渠道之外,还可以借助系统自带的各种途径.iOS提供了3种快速分享消息的方式,分别为发送邮件.发送短 ...
- jmeter使用Beanshell预处理器从指定列表中获取随机值
变量mynation从列表{"china", "US", "UK"}中随机取值 String[] nation = new String[] ...
- re模块、hashlib模块
一.re模块 1.什么是正则? 正则就是用一系列具有特殊含义的字符组成一套规则,该规则用来描述具有某一特征的字符串,正则就是用来去一个大的字符串中匹配出符合规则的子字符串 2.为何要用正则? 用户注册 ...
- Codeforces Round #517 (Div. 2)
A #include<queue> #include<cstdio> #include<cstring> #include<algorithm> #de ...
- Java并发编程(四)-- Java内存模型
Java内存模型 前面讲到了Java线程之间的通信采用的是共享内存模型,这里提到的共享内存模型指的就是Java内存模型(简称JMM),JMM决定一个线程对共享变量的写入何时对另一个线程可见.从抽象的角 ...
- 搭建 LAMP 环境
1,搭建 MySQL 数据库 .安装 MySQL 使用 yum 安装 MySQL: yum install mysql-server -y 安装完成后,启动 MySQL 服务: service mys ...
- [P1441]砝码称重 (搜索+DP)
对于我这种蒟蒻,是很不错的一题了. dfs搜索当前状态 满足时DP 比较坑的地方就是起始的地方 我一开始从1开始,搜索写的是从0开始. 后来就统一用0开始的了. #include<bits/st ...
- Django构建简介
MVC框架 MVC:Model View Controller,是软件工程中的一种软件构架模式,把软件系统分为三个基本模型,具有耦合性低.重用性高.生命周期成本低等优点 Model:模型,操作数据库 ...
- Java 动态代理 Demo
相比于静态代理,动态代理避免了开发者编写各个繁锁的静态代理类,只需指定一组接口及目标类对象就能动态地获取代理对象. 使用动态代理的六大步骤: 1 通过实现InvocationHandler接口来自定义 ...
- 如何实现织梦dedecms表单提交时发送邮箱功能【已解决】
我们通过织梦系统制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单.但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱.网站经过测试终于实现了 ...