移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的。

但是我们在编写css的时候,需要计算每一个元素相对于根元素的rem值是多少。会比较麻烦,并且维护起来也不方便。那么社区也出现了各种解决方案。

早期的解决方案是利用 sass 或者less编写函数进行自动转换。到后来淘宝的lib-flexible,再到现在的 postcss,都是为了编写的时候写的是px,会自动转为 rem。下面我们就来看下vue-cli2.x 和 3.x 如何去配置。

vue-cli2.x

1. 安装依赖

npm install px2rem-loader --save-dev
npm install lib-flexible --save

2. 在 src/main.js 中引入

import 'lib-flexible';

3. 在 build/utils.js 中加入以下代码

exports.cssLoaders = function (options) {
// ...
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// ...
function generateLoaders (loader, loaderOptions) {
// 在原来的loader添加上px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
// ...
}
}

4. 如果想要页面的viewport缩放则需要将 index.html 中注释掉原来的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--
官方上说是要把这里注释掉
此处注释掉之后,lib-flexible 会根据不同的屏幕自动添加,比如2倍屏这里就是 0,5 但是,我这用的时候有点坑。。
如果将此注释掉,在某些需要写 px 的地方,就会出现在不同的屏幕上看到的 大小不一样的问题,因为缩放的比例不同了。比如富文本渲染,就得用px
解决办法是使用不注释此代码,在任何手机上都是按照1倍进行缩放。。px2remloader会自动计算,不会有问题
 这里看各自项目的需要吧
-->

vue-cli 3.x

1. 下载依赖

npm install postcss-pxtorem --save-dev // 此处和2.x 不一样的插件
npm install lib-flexible --save

2. 在 src/main.js 中引入

import 'lib-flexible/flexible.js'; // 此处和2.x不一样

3. 在package.json中配置

// 在最后添加此脚本
{
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75,
"propList": [
"*"
]
}
}
}
}

4. 如果想要页面的viewport缩放则需要将 public/index.html 中注释掉原来的设置, 通上面的第四步

demo 可参考本人的配置

cli2.x: https://github.com/Shenjieping/app-cli

cli3.x: https://github.com/Shenjieping/app-cli-v3

vue-cli 2.x和3.x配置移动端适配px自动转为rem的更多相关文章

  1. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  2. vue换算单位px自动转换rem

    cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...

  3. vue项目中px自动转换为rem

    .安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...

  4. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  5. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  8. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  9. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

随机推荐

  1. docker部署dubbo怎么实现外部主机访问服务?

    dubbo在分布式项目中太常见了,docker也是现在热门的项目,然而docker的网络配置也是非常麻烦的一件事情,这里给大家介绍一下dubbo实现跨服务器访问服务配置 docker-compose. ...

  2. 如何用Nearby Service开发针对附近人群的精准广告推送功能

      当你想找一家餐厅吃饭,却不知道去哪家,这时候手机跳出一条通知,为你自动推送附近优质餐厅的信息,你会点击查看吗?当你还在店内纠结于是否买下一双球鞋时,手机应用给了你发放了老顾客5折优惠券,这样的广告 ...

  3. js进度条

    第一步//====================.wrap,.circle,.percent{                  position: absolute;                ...

  4. Pycharm连接MySQL后出现不出现数据库或表,出现其他文件的问题

    在使用pycharm连接MySQL,配置完成,测试连接通过之后,还是不能显示数据库中的表,出现了许多像armscii8_bin.armscii8_general_ci和ascii_bin等的文件. 解 ...

  5. nginx location 知识知多少

    写在之前 众所周知 nginx location 路由转发规则多种多样,尤其是 [ = | ~ | ~* | ^~ ] 这些前缀是什么意思.root 与 alias 是否可以区分开,nginx 作为反 ...

  6. 【2003、2004 NOIp 入门组错题报告】

    2003: T4: 题目大意:  讲这么多话,其实就是求比当前序列大的序列中第m小的一个.可以每次找出比当前序列大的最小的一个序列.我们可以从后往前扫描,当当前这个数比后一个数小时,我们把它与它后面的 ...

  7. Dubbo远程调用之公司内部提供的服务

    公司内部提供的服务 一家对外提供服务的公司,例如百度,腾讯,阿里,京东,58 同城等,公司内部有多个事业群,事业部门,每个事业部门内部又有若干个子部门,子部门里面有多个不同的小组负责各自的业务.提供对 ...

  8. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

  9. MySQL实验 内连接优化order by+limit 以及添加索引再次改进

    MySQL实验 内连接优化order by+limit 以及添加索引再次改进 在进行子查询优化双参数limit时我萌生了测试更加符合实际生产需要的ORDER BY + LIMIT的想法,或许我们也可以 ...

  10. React学习路径快速进入AntDesignPro开发

    好久没有写博客,有空再来记一下.最近在整些小东西,需要用到前端,最开始本着对nodejs的动不动几百兆插件的恐惧, 于是使用自己以前写的 OSS.Pjax 小框架(类似国外的Pjax,利用pushSt ...