1.下载lib-flexible

使用的是vue-cli+webpack,通过npm来安装的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.设置meta标签

通过meta标签,设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安装postcss-pxtorem

一款 postcss 插件,用于将单位转化为 rem

npm install postcss-pxtorem -D

5.配置postcss-pxtorem

在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js
在根目录找到.postcssrc.js文件,可以在此配置的基础上根据项目需求进行修改,如:

module.exports = {
plugins: {
//...
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}

注意:在配置 postcss-loader 时,应避免 ignore node_modules 目录,这会导致 Vant 的样式无法被编译

温馨提示: rootValue这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把rootValue设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。(iPhone界面尺寸:320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。)
那为什么你在这里写成了37.5呢???
之所以设为37.5,是为了引用像vant、mint-ui这样的第三方UI框架,因为第三方框架没有兼容rem,用的是px单位,将rootValue的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原vant、mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半(比如设计稿尺寸是750px,字体大小是22px的话,css的样式字体大小就写12px)。

6.当配置完之后,只需要重启下服务,就自动转化为rem了

npm run dev 或者 npm run serve

vue项目使用Vant框架Rem适配(postcss-pxtorem、lib-flexible )的安装使用的更多相关文章

  1. Vue项目使用vant框架

    近期在开发h5端项目,用到vant框架,vant是一款基于Vue的移动UI组件,看了vant的官方文档(https://youzan.github.io/vant/#/zh-CN/)感觉不错,功能比较 ...

  2. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  3. vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决

    问题分析: 一般第三方ui框架用的都是不同的适配方式,如果我们使用了vw适配,那么在使用mint-ui框架时,就会发现px单位会被转换成vw,从而导致样式变小的问题,如图 解决方案 网上看到了很多种解 ...

  4. vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

    滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...

  5. vue 项目中px转rem转换问题(postcss-px2rem)

    1.安装postcss-px2rem npm install postcss-px2rem --save npm install postcss-px2rem --save 2.配置px2rem 在配 ...

  6. vue项目使用vux框架配置教程

    吐槽下,这个vux配置教程那..写的实在是坑,也不搞个示例代码...想上天吗???? 正常安装的话...100%报错...以下是正确配置 1.项目里安装vux   npm install vux -- ...

  7. Vue 项目启动抛出 Error/ No PostCSS Config found in

    项目启动时抛出 Error: No PostCSS Config found in … 的错误表示某个 css 文件不能被引入 解决办法: module.exports = { plugins: { ...

  8. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  9. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

随机推荐

  1. Java IO: System.in, System.out, System.err

    原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) System.in, System.out, System.err这3个流同样是常见的数据来 ...

  2. Nginx笔记总结六:Nginx location配置

    语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...

  3. <JZOJ1286>太空电梯

    一道简单可爱的dp #include<cstdio> #include<iostream> #include<cstring> #include<algori ...

  4. Java集合 - 明的博客

    "In this world there are only two tragedies. One is not getting what one wants, and the other i ...

  5. 使用pandas,numpy进行数据分析建模的一些常用命令

    1.读取文件为pandas格式: import pandas as pd import numpy as np dataset = pd.read_csv("C:/Users/Adminis ...

  6. VMware虚拟机克隆CentOS6.5后修改网卡

         在学习zk伪分布式集群对的时候,第一次注意到克隆虚拟机后修改eth的ip地址,发现ip不是自己修改的ip,进而在询问下发现,当我们第一次登陆查看我们克隆的虚拟机ip时:我们看到的ip不是et ...

  7. STM32F103驱动ADS1118

    ADS1118 作为常用温度测量芯片被越来越多的开发者熟知,TI官方给出的是基于 MSP430 的驱动测试程序,由于 STM32 的普及,闲暇中移植了 MSP430 的 ADS1118 驱动程序到 S ...

  8. resourcequota分析(一)-evaluator-v1.5.2

    什么是evaluator 大家都知道,Kubernetes中使用resourcequota对配额进行管理.配额的管理涉及两个步骤:1.计算请求所需要的资源:2.比较并更新配额.所以解读resource ...

  9. springboot java web开发工程师效率

    基础好工具 idea iterm2 和 oh-my-zsh git 热加载 java web项目每次重启时间成本太大. 编程有一个过程很重要, 就是试验, 在一次次试验中探索, 积累素材优化调整程序模 ...

  10. 移动端使用mint-ui组件loadmore填坑

      链接地址为 https://mint-ui.github.io/docs/#/en2/loadmore ,这里需要注意引入的方式,我这里是用cdn的方式引入的.请结合官方API阅读本文章. 2.在 ...