移动端适配rem（Vant）

已于 2023-12-16 16:44:32 修改
阅读量467 收藏 8
点赞数 10
文章标签： javascript 开发语言 rem
于 2023-12-16 16:34:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59527403/article/details/135034281
版权
本文讲述了如何使用postcss-pxtorem插件将px值转换为rem，包括安装步骤、在Vue-cli项目中配置.postcssrc.js以消除警告，并说明了如何处理已有的van组件和自定义样式转换问题。
摘要由CSDN通过智能技术生成

需要注意

该插件不能转换行内样式中的px
利用vant提供的
在这里插入图片描述
首先安装
在这里插入图片描述
在这里插入图片描述
可以看到
在这里插入图片描述
第二步配置
1.安装
npm install postcss-pxtorem -D
2.在项目根目录创建.postcssrc.js文件
在这里插入图片描述
配置完毕，重新启动服务（红色是警告，是因为vue-cli已经配置过了，所以不需要）
所以注释这些，再重启就不会有警告了
在这里插入图片描述直接使用即可

在这里插入图片描述

在这里插入图片描述

此时已经是rem
vant组件的样式
在这里插入图片描述
自己写的样式
在这里插入图片描述
其他设计稿尺寸
在这里插入图片描述

愿➣
关注
Vant 的 rem 引用
爱睡的虫虫
04-11 274
引入： npm i lib-flexible -S npm i postcss-pxtorem -D main.js import "lib-flexible/flexible"; 项目根目录下创建： postcss.config.js //postcss.config.js module.exports = { plugins: { auto...
vue项目移动端适配rem
m0_65331985的博客
10-20 534
vue项目移动端适配rem
Vant中使用rem
走走停停
11-23 1949
Vant 中的样式默认使用 px 作为单位，使用 rem 单位，按照以下步骤： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 1、安装 # yarn add amfe-flexible npm i amfe-flexible 2、然后在 main.js 中加载执行该模块 import 'amfe-flexibl
移动端vant组件库px转rem适配总结
最新发布
2301_77967998的博客
08-11 251
番外（全局安装引入vant组件库-我使用的vant2）2.在main.js配置（官网抄的）3.在main.js配置。
Vant rem适配
Xiaocong__的博客
12-31 2001
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...
Vant中移动端Rem适配
qq_44333912的博客
07-28 280
在终端输入: npm i amfe-flexible 在main.js中导入模块 ： import 'amfe-flexible' 在终端输入: npm install postcss-pxtorem -D 在项目根目录中创建 .postcssrc.js 文件 并敲入如下代码 ???? module.exports = { plugins: { //样式规则前缀（由于在服务器中会警告故在此注释掉） /*'autoprefixer':{ browsers: ['Android >=
手写rem 与 移动端vant配置rem(2)
2401_84092360的博客
04-17 678
图例:是一款postcss插件，用于将单位转化为rem用于设置rem基准值,将px转为rem,安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是3.x 所以要安装vant的针对vue3的版本 vant@next)第二步vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)
vant移动端rem适配
zailaisanwan的博客
01-25 843
如果需要使用 rem 单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） npm i amfe-flexible 然后在main.js导入(可打开页面看看html标签的font-size大小变化) import 'amfe-flexible/index.min.j..
Vue在移动端基于rem适配实现思路及过程
qq_49896911的博客
06-21 915
vue，vant，移动端适配
vuevantUIaxios移动端项目rem做适配
08-10
5. 移动端适配策略：在移动端项目中，通常采用Flexbox布局或Grid布局来实现响应式设计。项目可能运用了这些技术，确保元素在不同屏幕尺寸下都能正确排列和显示。 6. Babel：由于部分旧版浏览器不支持ES6以上的语法...
Vant移动端适配
weixin_43502808的博客
09-27 697
Vant移动端适配
vue3.0使用vant组件的过程
wjw0125的博客
05-31 2029
创建项目 vue create yxsc_project 安装vant 组件库 第一步 安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next) 第二部 vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸) 配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i
手写rem 与 移动端vant配置rem(1)，严选
qiqiyuer的博客
04-06 752
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取[外链图片转存中…(img-sdx4OIBy-1712364385865)]
vant 移动端rem适配
bamboozjy的博客
12-18 500
1.实现rem适配,需要安装2个依赖包: postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem; lib-flexible用于设置 rem 基准值,安装时名称为amfe-flexible,参考官方文档:https://github.com/amfe/lib-flexible npm i postcss-pxtorem -D npm i amfe-flexible -S 2.在项目根目录新建 postcss.config.js 文件,里面配置为: modu...
在移动端, 使用vant进行rem移动端屏幕适配
qq_43340606的博客
10-12 204
使用vant进行rem移动端屏幕适配 1.下载所需工具 npm i postcss-pxtorem -D npm i amfe-flexible 2.修改根目录下的postcss.config.js 文件（如果没有这个文件，可以手动添加一份） 在这里插入图片描述 3.修改根目录下的postcss.config.js 文件 module.exports = { plugins: { 'autoprefixer': {}, 'postcss-pxtorem': { rootVa
VUE基于 vant 的移动端 REM 适配
m0_37618883的博客
03-26 704
根据设计稿进行适配
移动端Vant组件库REM适配
jyn15159的博客
10-28 3125
REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点。 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位px转化为 rem。 lib-flexible 用于设置 rem 基准值，设置 font-size 基准值。 postcss-pxtorem postc
移动端适配教程：rem转换与amfe-flexible实践
本文档是一份详细的移动端适配教程，主要关注于如何利用`rem`单位来实现响应式设计。首先，我们将了解`rem`相关的配置步骤。 1. 安装插件：为了实现自动的px到rem转换，文档推荐使用PostCSS和两个插件——`postcss-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值