基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem
安装 flexible和 postcss-px2rem（命令行安装）
npm install lib-flexible --save npm install postcss-px2rem --save
lexible会为页面根据屏幕自动添加<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值。
引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
import 'lib-flexible'
配置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;
}
在vue-cli2中编辑项目根目录下.postcss.js文件（没有则新建一个）
module.exports = {
"plugins": {
require('postcss-px2rem')({
remUnit: 37.5
})
}
}
温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！
之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem的更多相关文章
- 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem
1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- Vue CLI及其vue.config.js（一）
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 基于@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/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
随机推荐
- .NET使用ServerManager获取网站物理路径
最近因为工作需要,用wpf做了一个辅助小工具,如下图 为了获取网站的物理路径,我分析了通过ServerManager获取到的变量,也通过百度搜索了很多,但仍然没有找到方法. 后来使用必应,在国外网站找 ...
- ABP Changing Httpcode status
小弟初来乍到,分享一些工作学习中遇到的问题和解决方式,如有不准确或是有错误的地方,希望不吝赐教,谢过了. --Dogtwo 起因: ABP 中异常处理的思路是很清晰的.一共五种类型的异常类. Abp ...
- 从零开始学安全(二十七)●利用Nmap对防火墙,IDS,IPS 进行欺骗
先介绍什么是防火墙 ids 并联 ips 串联 来看我们nmap 命令
- EF怎样实现ORM思想的（转载）
EF简介 实体框架(Entity Framework)简称EF,是微软以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案.是ADO.NET中的一组支持开发面向数据的软件应 ...
- C#判断输入的是否为数字（int.TryParse）
了解 TryParse: TryParse静态方法用来将字符串转换成对应类型的数值. 所以int.TryParse()是将字符串转换为int类型的,如果成功返回true,失败返回false. priv ...
- 先装IIS后装.Net Framework
1.动态页面和静态页面的区别 动态页面(动态网站):通过C#代码(或别的语言)与服务器的交互的实现(比如新建一个ashx一般处理程序中的C#代码就可以和服务器实现交互,修改数据库,上传图片等都属于和服 ...
- 阅读Java Native源码前的准备
前言 读java native源代码时,我们一般会去网站下载openjdk8源码http://download.java.net/openjdk/jdk8/promoted/b132/openjdk- ...
- python中的eval函数
eval() 函数十分强大 -- 将字符串 当成 有效的表达式 来求值 并 返回计算结果 In [1]: eval("1 + 3") Out[1]: 4 In [2]: eval( ...
- vue-i18n和ElementUI国际化使用
在main.js同级建i18n文件夹,并里面建i18n.js.langs文件夹,langs文件夹下建en.js.cn.js目录如下: 展示效果地址: http://www.cenweixin.cn/w ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...