Vant移动端rem适配方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vant移动端rem适配方案相关的知识,希望对你有一定的参考价值。

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

[ lib-flexible 用于设置 rem 基准值,设置根字体的大小

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

2、使用 lib-flexible 动态设置 REM 基准值

html 标签的字体大小

2.1 安装

// yarn add amfe-flexible

​cnpmiamfe-flexible-S

2.2 然后在 main.js 中加载执行该模块

import    'amfe-flexible'

2.3 最后测试:在浏览器中切换不同的手机设备尺寸,观察 html 标签 font-size 的变化

. 例如在 iPhone 6/7/8 设备下,html 标签字体大小为 37.5 px

. 例如在 iPhone 6/7/8 Plus 设备下,html 标签字体大小为 41.4 px

3、使用 postcss-pxtorem 将 px 转为 rem

3.1  安装

// yarn add -D postcss-pxtorem

// -D 是 --save-dev 的简写

cnpminstallpostcss-pxtorem-D

3.2  然后在 项目根目录 中创建 .postcssrc.js 文件

module.exports=

plugins:

'autoprefixer':

browsers: ['android >= 4.0','ios >= 8']

   ,

'postcss-pxtorem':

rootValue:37.5,

propList: ['*']

  

 



3.3  配置完毕,重新启动服务

npmrunserve

最后测试: 刷新浏览器页面 ,审查元素的样式查看是否已将 px 转换为 rem

转换之前的样式

4、注意事项:

该插件 不能转换行内样式中的 px ,例如 <div style="width: 200px;"></div>

5、postcss-pxtorem 插件的配置

rootValue:表示根元素字体大小,它会根据根元素大小进行单位转换

propList 用来设定可以从 px 转为 rem 的属性

例如 * 就是所有属性都要转换,width 就是仅转换 width 属性

rootValue 应该如何设置呢?

如果你使用的是基于lib-flexable的REM适配方案,则应该设置为你的设计稿的十分之一。

例如设计稿是750宽,则应该设置为75。

大多数设计稿的原型都是以 iphone6 为原型,iphone6 设备的宽是 750,我们的设计稿也是这样。

但是 Vant 建议设置为 37.5,为什么呢?

因为Vant是基于375写的,所以如果你设置为75的话,Vant的样式就小了一半。

所以如果设置为 37.5 的话,Vant 的样式是没有问题的,但是我们在测量设计稿的时候都必须除2才能使用,否则就会变得很大。

这样做其实也没有问题,但是有没有更好的办法呢?我就想实现测量多少写多少(不用换算)。于是聪明的你就想,可以不可以这样来做?

如果是 Vant 的样式,就把 rootValue 设置为 37.5 来转换

如果是我们的样式,就按照 75 的 rootValue 来转换

通过 查阅文档 我们可以看到 rootValue 支持两种参数类型

数字:固定值

函数:动态计算返回

postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数

它会把被处理的 CSS 文件相关的信息通过参数传递给该函数

修改配置如下

/**

* PostCSS 配置文件

*/

module.exports=

// 配置要使用的 PostCSS 插件

plugins:

// 配置使用 autoprefixer 插件

// 作用:生成浏览器 CSS 样式规则前缀

// VueCLI 内部已经配置了 autoprefixer 插件

// 所以又配置了一次,所以产生冲突了

// 'autoprefixer': // autoprefixer 插件的配置

//   // 配置要兼容到的环境信息

//   browsers: ['Android >= 4.0', 'iOS >= 8']

// ,



// 配置使用 postcss-pxtorem 插件

// 作用:把 px 转为 rem

'postcss-pxtorem':

rootValue(file)

returnfile.indexOf('vant')!==-1?37.5:75

     ,

propList: ['*']

  

 





其他

[Android]

>=4.0



[iOS]

>=8

​具体语法请 参考这里

5.  配置完毕,把服务重启一下,最后测试,very good

以上是关于Vant移动端rem适配方案的主要内容,如果未能解决你的问题,请参考以下文章

移动端vue实现样式自适应(结合vant)

移动端Rem适配(基于vue-cli3 ,ui框架用的是vant-ui)

vue:将px转化为rem,适配移动端vant-UI等框架(postcss-pxtorem)

移动端 REM 适配

[Vant] van-tabs标签页吸顶/粘性布局在移动端适配上的一些尝试

[Vant] van-tabs标签页吸顶/粘性布局在移动端适配上的一些尝试