基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem
1，安装 flexible和 postcss-px2rem（命令行安装）
npm install lib-flexible --save npm install postcss-px2rem --save
简要介绍这两个包的用途：
flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
例如在Galaxy S III:
例如在iphone6/7/8:
postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
3, 配置postcss-px2rem
vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。具体请看vue-cli官网 https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
OK，重启项目，两个用于移动端适配的包就这样可以愉快的开始使用了！！！
下面来看我们的代码，代码中我们直接用px来写宽高：
.testclass {
width: 300px;
height: 200px;
background: #e3e3e3;
}
在浏览器中会是什么样的呢？
没错，已经从px转换成了rem。 what？如果你的没有从px变成rem, 那么你可能需要重启一下项目呦~
温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！
之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem的更多相关文章
- 基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem
安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...
- VUE CLI3.X 创建项目
Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
- vue cli3 创建的项目中eslint 配置 问题的解决
1-- vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...
- Vue CLi3入门
摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- 基于Vue 和 webpack的项目实现
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
随机推荐
- 腾讯云服务器ubuntu16.04系统下安装Python版本管理工具pyenv
一. 系统环境 腾讯云提供的系统是ubuntu 16.04 LTS,系统默认的Python版本是2.7.12,我想要安装3.6和其他的版本. 比较方便的是腾讯云已经默认安装好了git和curl ...
- ue4 Skeletal Mesh编辑器
skeletal mesh:骨骼网络物体资源 由 美术制作(*.fbx). 在ue4可对此资源进行编辑以添加一些游戏需要的设置. https://docs.unrealengine.com/lates ...
- luogu P3233 [HNOI2014]世界树
传送门 我是什么时候写的这题的qwq 首先,发现关键点的总数被限制了,很自然想到虚树,并且,对于一个关键点,他管理的点显然是一个联通块 然后把虚树先建出来,然后两次dfs,第一次是向祖先更新离每个点最 ...
- PHP7语法知识（四）：目录文件操作、Cookie与Session、MySQL数据库的使用、Redis数据库、PHP处理XML与JSON
目录文件操作 一.目录 1.判断文件类型: 2.创建和删除目录: 3.打开读取和关闭目录 4.获得路径中目录部分 5.目录磁盘空间 二.文件操作 1.打开文件: 2.读取文件: 3.获得文件属性: 4 ...
- npm 切换源 nrm
版权声明:欢迎转载,请附加转载来源:一路博客(http://www.16boke.com) 转载 http://blog.csdn.net/wyc_cs/article/details/5155925 ...
- nginx常用指令
./nginx #打开 nginx nginx -s reload|reopen|stop|quit #重新加载配置|重启|停止|退出 nginx nginx -t #测试配置是否有语法错误 ngin ...
- LOJ #2587「APIO2018」铁人两项
是不是$ vector$存图非常慢啊...... 题意:求数对$(x,y,z)$的数量使得存在一条$x$到$z$的路径上经过$y$,要求$x,y,z$两两不同 LOJ #2587 $ Solutio ...
- (1)Java数据结构--图文并茂-分析优缺点
转:常见Java数据结构&优缺点 - /画家/ - 博客园http://www.cnblogs.com/earl-yongchang/p/5639161.html 图片也是引用过来的,没有重新 ...
- XLMHttpRequest对象的status属性，readyState属性以及onreadystatechange事件
注:XLMHttpRequest简写为XHR 一.HTTP请求过程 (1)建立TCP链接 (2)web浏览器向web服务器发送请求命令 (3)web浏览器发送请求头信息 (4)web服务器应答 (5) ...
- linux系统 之 git
1,git是啥? 最流行的分布式版本控制系统,在高度易用的同时,仍然保留着初期设定的目标.它的速度飞快,极其适合管理大项目,它还有着令人难以置信的非线性分支管理系统,可以应付各种复杂的项目开发需求. ...