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的更多相关文章

  1. 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  2. VUE CLI3.X 创建项目

    Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...

  3. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  4. 使用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 ...

  5. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  6. vue cli3 创建的项目中eslint 配置 问题的解决

    1--   vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...

  7. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  8. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  9. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

随机推荐

  1. mac 下node,yarn安装及版本切换

    node安装 https://nodejs.org/en/download/ 到官网下载指定版本 安装node的管理工具 sudo npm install -g n //安装n sudo n 8.9. ...

  2. 第26月第9天 getActionBar为空的解决办法

    1.python 包路径 export PYTHONPATH=路径 https://blog.csdn.net/machinezj/article/details/60137666 2.getActi ...

  3. 微信小程序总结

    一.基础用法: <navigator url='跳转页面组件'></navigator>用法和a标签差不多 <text></text>文本标签 < ...

  4. 事件对象event

    每个事件都有默认事件event对象 e.target 事件目标对象 e.keycode 键码 e.stopPropogation();//阻止默认事件

  5. JSP动态页面技术

    1.JSP和html的区别 处理过程的区别 HTML 浏览器发送一个请求到服务器,服务器找到这个页面直接返回. JSP 浏览器发送一个请求道服务器,服务器判断到时.jsp结尾,去调用JSP引擎,JSP ...

  6. 剑指Offer-把数组排成最小的数

    题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路 可以看 ...

  7. mysql 案例 ~ mysql主从复制错误问题

    简介 mysql主从不同步的几种情况 一  具体情况   1 主库有memory引擎的内存表      分析 由于memory表的数据存放在内存中,一旦主库数据丢失,从库可能就会发生数据复制异常    ...

  8. python - zipfile模块

    import zipfile # f=zipfile.ZipFile(filename, mode="r", compression=ZIP_STORED, allowZip64= ...

  9. JVM内存分配及GC流程

    -verbose 这是查询GC问题最常用的命令之一,具体参数如: -verbose:class 输出jvm载入类的相关信息,当jvm报告说找不到类或者类冲突时可此进行诊断. -verbose:gc 输 ...

  10. ASP.NET - ADO.NET框架

    ADO.NET(ActiveX Data Objects) ADO.NET是一个COM组件库,用于在使用Microsoft技术的代码中访问数据库. SQL数据操作类 SqlConnection类(Sy ...