Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem;

amfe-flexible 用于设置 rem 基准值

1==> 去下载amfe-flexible 和postcss-pxtorem

 "dependencies": {
"amfe-flexible": "^2.2.1",
"core-js": "^3.6.5",
"postcss-pxtorem": "^5.1.1",
"vant": "^2.12.9",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
}, 安装postcss-pxtorem和amfe-flexible的时候,要注意版本,
否者可能会出现如下Error: PostCSS plugin tailwindcss requires PostCSS 8
这个因为版本出问题了,下载之后,重新下载 npm install postcss-pxtorem -D
npm install amfe-flexible -S
-D 是 --save-dev 的简写
–save-dev || -D //开发依赖(辅助)
--save || -S // 运行依赖(发布)

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

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

3==> 创建文件 .postcssrc.js文件,在根目录中

module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}
温馨提示: 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 那么我们必须在写样式时,也将值改为设计图的一半。
如果你用的是摹客,可以切换开发平台,变成自定义,单位转换1px=2px; 参考:https://www.jianshu.com/p/220a186cc033

4==>在main.js中去引入

import 'amfe-flexible/index.js'

我们可以看见在h5端上

我们可以看见在pc端上

h5移动端像素适配 postcss-pxtorem和amfe-flexible的更多相关文章

  1. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  2. h5移动端屏幕适配

    1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  4. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  5. (转)使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...

  6. [转]使用Flexible实现手淘H5页面的终端适配

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  7. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  8. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  9. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  10. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

随机推荐

  1. VUE 前端读取excel表格内容

    <el-upload class="upload-demo" :action="''" :show-file-list="false" ...

  2. Liunx-Shell脚本

    shell可以理解为对命令行的一个解释器,命令行输入命令,shell执行,linux系统输出结果 1. shell脚本格式 开头: #!/bin/bash #!告诉系统其后路径所指定的程序即是解释此脚 ...

  3. 【Java基础】-- instanceof 用法详解

    1. instanceof关键字 如果你之前一直没有怎么仔细了解过instanceof关键字,现在就来了解一下: instanceof其实是java的一个二元操作符,和=,<,>这些是类似 ...

  4. SQL Server数据表模糊查询(like用法)详解

    在SQL Server Management Studio (SSMS) 中,进行模糊查询主要是通过使用like操作符来实现的.like操作符用于在where语句中搜索列中具有指定模式的数据.我们在简 ...

  5. Xpath解析及其语法

    XPath解析 XPath(XML Path Language)是一种用于在XML和HTML文档中查找信息的语言,其通过路径表达式来定位节点,属性和文本内容,并支持复杂查询条件,XPath 是许多 W ...

  6. uniapp 画布

    1.前言 uniapp中的canvas与HTML中的canvas用法并不同,他的使用文档请参考微信小程序画布 2.基本使用 1.准备canvas容器,并为其设置canvas-id和宽高(为了兼容H5, ...

  7. 预热篇2:从RNN到Transformmer

    下面是整理的一个思维导图 2010年Mikolov提出了RNN网络,RNN网络存在长距离依赖(梯度消失),计算效率(RNN 难以并行)两个问题 2017年Transformmer网络结构问世,Tran ...

  8. docker安装Nginx并运行vue3前端

    Docker安装Nginx #获取Nginx docker pull nginx #查端口 netstat -ntlp #建本地目录 mkdir -p /home/nginx/www /home/ng ...

  9. 【MySQL】MySQL命令总结 | 数据库与数据表的创建删除与查询

    @ 目录 数据库 创建数据库 使用数据库 删除数据库 查看所有数据库 数据表 查看数据库中所有数据表 在数据库中创建数据表 删除数据表 修改表名 查询表列(字段)信息 表-删除某一字段 表-增加某一字 ...

  10. mac 安装mysql详细教程(安装包方式)

    一:下载最新的MySQL社区版 为了安装更方便,建议下载dmg安装包.最新的版本是5.7.20.   MySQL 二:安装MySQL 双击 mysql-5.7.20-macos10.12-x86_64 ...