vue-cli 2.x和3.x配置移动端适配px自动转为rem
移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 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的更多相关文章
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- vue换算单位px自动转换rem
cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...
- vue项目中px自动转换为rem
.安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...
- Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。
场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...
随机推荐
- docker部署dubbo怎么实现外部主机访问服务?
dubbo在分布式项目中太常见了,docker也是现在热门的项目,然而docker的网络配置也是非常麻烦的一件事情,这里给大家介绍一下dubbo实现跨服务器访问服务配置 docker-compose. ...
- 如何用Nearby Service开发针对附近人群的精准广告推送功能
当你想找一家餐厅吃饭,却不知道去哪家,这时候手机跳出一条通知,为你自动推送附近优质餐厅的信息,你会点击查看吗?当你还在店内纠结于是否买下一双球鞋时,手机应用给了你发放了老顾客5折优惠券,这样的广告 ...
- js进度条
第一步//====================.wrap,.circle,.percent{ position: absolute; ...
- Pycharm连接MySQL后出现不出现数据库或表,出现其他文件的问题
在使用pycharm连接MySQL,配置完成,测试连接通过之后,还是不能显示数据库中的表,出现了许多像armscii8_bin.armscii8_general_ci和ascii_bin等的文件. 解 ...
- nginx location 知识知多少
写在之前 众所周知 nginx location 路由转发规则多种多样,尤其是 [ = | ~ | ~* | ^~ ] 这些前缀是什么意思.root 与 alias 是否可以区分开,nginx 作为反 ...
- 【2003、2004 NOIp 入门组错题报告】
2003: T4: 题目大意: 讲这么多话,其实就是求比当前序列大的序列中第m小的一个.可以每次找出比当前序列大的最小的一个序列.我们可以从后往前扫描,当当前这个数比后一个数小时,我们把它与它后面的 ...
- Dubbo远程调用之公司内部提供的服务
公司内部提供的服务 一家对外提供服务的公司,例如百度,腾讯,阿里,京东,58 同城等,公司内部有多个事业群,事业部门,每个事业部门内部又有若干个子部门,子部门里面有多个不同的小组负责各自的业务.提供对 ...
- CSS中link和@import的使用区别
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...
- MySQL实验 内连接优化order by+limit 以及添加索引再次改进
MySQL实验 内连接优化order by+limit 以及添加索引再次改进 在进行子查询优化双参数limit时我萌生了测试更加符合实际生产需要的ORDER BY + LIMIT的想法,或许我们也可以 ...
- React学习路径快速进入AntDesignPro开发
好久没有写博客,有空再来记一下.最近在整些小东西,需要用到前端,最开始本着对nodejs的动不动几百兆插件的恐惧, 于是使用自己以前写的 OSS.Pjax 小框架(类似国外的Pjax,利用pushSt ...