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

摘要:
3,配置postcss-px2remvue-cli3构建的项目相较于vue-cli2构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。具体请看vue-cli官网https://cli.vuejs.org/zh/guide/px2rem的配置放在vue-cli3项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)具体配置内容如下:1module.exports={2css:{3loaderOptions:{4css:{},5postcss:{6plugins:[7require10]11}12}13},14}OK,重启项目,两个用于移动端适配的包就这样可以愉快的开始使用了!!!没错,已经从px转换成了rem。

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:

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

例如在iphone6/7/8:

基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem第2张

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)

具体配置内容如下:

1 module.exports ={
2 css: {
3 loaderOptions: {
4 css: {},
5 postcss: {
6 plugins: [
7               require('postcss-px2rem')({
8                 remUnit: 37.5
9 })
10 ]
11 }
12 }
13 },
14 }

OK,重启项目,两个用于移动端适配的包就这样可以愉快的开始使用了!!!

下面来看我们的代码,代码中我们直接用px来写宽高:

1 .testclass {
2 300px;
3 height: 200px;
4 background: #e3e3e3;
5 }

在浏览器中会是什么样的呢?

基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem第3张

没错,已经从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》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇sudoers的深入剖析关于sum(int)报错:将expression转化为数据类型int时发生算术溢出错误下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装

因为我暂时不需要第五章和第六章教程的内容所以直接进入第七章。感兴趣的可以访问原作者网站 Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题  Vue + Element UI 实现权限管理系统 前端篇(五):国际化实现  注:本次封装的css样式应该有点问题,但考虑时间问题没有认真修改,后续有时间重构时候补上。 组件...

2/3 初次搭建 Vue 项目遇到的问题汇总

  今天步子扯开的有点大   初步看了一下 Vue-router 然后就开始用脚手架 Vue-cli 来搭建第一个项目了   遇到的问题确实很多,还有一些疑问,自己查资料都大致解决了一部分   ( 推荐还是理解了一部分的有缘人 进行阅读理解 如果有错 请大家指正 )   按照流水账来说一下 首先是 Vue-router    这里先简单谈一下,我的理解  ...

vue项目部署到nginx服务

vue开发的项目,通过编译会得到 dist文件夹,如何发布到nginx服务器上? 配置nginx服务器 在nginx服务文件中,打开 conf文件夹 为了不改变nginx的默认配置(nginx.conf),复制一份,重名为 custom.conf 修改 custom.conf 文件中的 root 参数为 custom ...... server...

uniapp、vue,vuex中state改变,getters不动态改变的完美解决方案!

//想必各位朋友一定经历着,改变state,getters却不改变的痛苦,接下来博主给出解决方案; //方案很简单,第一步,改变state时,如改变state中的cart属性时,引入vue,使用vue set添加未定义的flag,如下: import Vue from 'vue'; //一定要引入vue,接下来要使用 //mutations Ad...

原有vue项目接入typescript

原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活。 这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,对接起来非常头疼。主要表现在几方面: 参数类型没有校验,怎么传都有,有时会出现一些由于类型转换带来的未知问题。 接口文档不...

vue按键修饰符@keyup.enter.native

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 应用场景: 1、当我们在登录页面中,输完密码后,点击enter键就可以发起登录请求 <!-- 登录表单区...