没接触过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引入情况,发现第一种能正常转换,二三不能正常转换,至于原因,由于才疏学浅,还是不懂,求大神解答三种引入方式的区别。

如果明白了这些方法,就没必要再配置cssLoaderimportLoaders了,因为下面的方法更容易控制外部引入的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,实现移动端自适应的更多相关文章

  1. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  2. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  3. 前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台

    基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约.大气,减少初学者或开发者不必要的工作量.后台维护采用的springboot+shiro的方式,为广大爱好者提供展示 ...

  4. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  5. vue cli 配置信息说明

    摘自csdn http://blog.csdn.net/hongchh/article/details/55113751

  6. 基于rem的移动端自适应解决方案

    代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...

  7. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  8. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  9. 手淘适配-flexible

    目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是 ...

随机推荐

  1. iOS12系统应用开发发送邮件

    iOS12系统应用开发发送邮件 消息分享是应用社交化和营销的重要途径.除了开发者自己搭建专有的消息分享渠道之外,还可以借助系统自带的各种途径.iOS提供了3种快速分享消息的方式,分别为发送邮件.发送短 ...

  2. jmeter使用Beanshell预处理器从指定列表中获取随机值

    变量mynation从列表{"china", "US", "UK"}中随机取值 String[] nation = new String[] ...

  3. re模块、hashlib模块

    一.re模块 1.什么是正则? 正则就是用一系列具有特殊含义的字符组成一套规则,该规则用来描述具有某一特征的字符串,正则就是用来去一个大的字符串中匹配出符合规则的子字符串 2.为何要用正则? 用户注册 ...

  4. Codeforces Round #517 (Div. 2)

    A #include<queue> #include<cstdio> #include<cstring> #include<algorithm> #de ...

  5. Java并发编程(四)-- Java内存模型

    Java内存模型 前面讲到了Java线程之间的通信采用的是共享内存模型,这里提到的共享内存模型指的就是Java内存模型(简称JMM),JMM决定一个线程对共享变量的写入何时对另一个线程可见.从抽象的角 ...

  6. 搭建 LAMP 环境

    1,搭建 MySQL 数据库 .安装 MySQL 使用 yum 安装 MySQL: yum install mysql-server -y 安装完成后,启动 MySQL 服务: service mys ...

  7. [P1441]砝码称重 (搜索+DP)

    对于我这种蒟蒻,是很不错的一题了. dfs搜索当前状态 满足时DP 比较坑的地方就是起始的地方 我一开始从1开始,搜索写的是从0开始. 后来就统一用0开始的了. #include<bits/st ...

  8. Django构建简介

    MVC框架 MVC:Model View Controller,是软件工程中的一种软件构架模式,把软件系统分为三个基本模型,具有耦合性低.重用性高.生命周期成本低等优点 Model:模型,操作数据库 ...

  9. Java 动态代理 Demo

    相比于静态代理,动态代理避免了开发者编写各个繁锁的静态代理类,只需指定一组接口及目标类对象就能动态地获取代理对象. 使用动态代理的六大步骤: 1 通过实现InvocationHandler接口来自定义 ...

  10. 如何实现织梦dedecms表单提交时发送邮箱功能【已解决】

    我们通过织梦系统制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单.但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱.网站经过测试终于实现了 ...