Vant rem适配

vue中使用vant的rem适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

首先需要安装，安装命令如下：

npm install postcss-pxtorem --save-dev 用于将单位转化为rem
npm i -S amfe-flexible 设置基准值

怎么使用

首先创建一个postcss.js文件写入如下代码：

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 8']},'postcss-pxtorem': {rootValue: 37.5,propList: ['*']  } } }

第二步在main.js中引入

 import 'amfe-flexible'

这个时候启动项目会报错：如下

这个错误是告诉我们rem这个插件的版本号过高需要进行降级处理：代码如下

npm i postcss-pxtorem@5.1.1

如何手动封装一个rem适配

手写rem的适配需要先获得屏幕html的宽度和body的宽度

<script>window.onresize = function(){rem();//注意调用// 这里要知道1rem的像素等于html的fontsize的一个字体大小// 对rem进行封装function rem(){let headerh = document.documentElement.clientWidth;  //获取html的宽度let bodyh = document.body.clientWidth;  //获取body的宽度console.log(headerh,bodyh);let xc = headerh || bodyh   //屏幕宽度document.documentElement.style.fontSize=(xc/750*100)+'px'}}
</script>

值得注意的是：

1 安装vant的组件进行rem适配时，目前版本要进行降级处理

2 vant是按照375px进行匹配，我们的设计图是750px，所以，在进入vant的rem适配之后，书写的尺寸大小要按照设计图的大小减半

Vant rem适配相关推荐

Vue移动端项目——Vant 移动端 REM 适配
Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...
vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
小程序跳转H5实现长截图功能；vue-cli3通过rem适配
一.需求: 微信小程序部分页面需要一键长图的功能. 通过html2canvas插件可以实现,具体可参考微信小程序实现一键长图并保存图片到相册.由于该插件只能在H5项目中使用,则需要截图的小程序 ...
vuecli4 启动_vuecli4 vant rem 移动端框架方案
更新 √ 2020-08-23 新增vw适配 √ 2020-04-21 github 优化文档,优化项目 √ 2020-02-05 升级vue-cli4,添加Eslint+Pettier,添加vant ...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架启动项目 git clone ht ...
vantUi rem 适配
npm install postcss-px-to-viewport --save-dev //安装rem 配置项目目录下创建 postcss.config.js 进行如下配置 module.exp ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题
[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

Vant rem适配

怎么使用

如何手动封装一个rem适配

值得注意的是：

Vant rem适配相关推荐

最新文章

热门文章