移动端适配rem（Vant）

原创 已于 2023-12-16 16:44:32 修改 · 566 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #rem

于 2023-12-16 16:34:27 首次发布
本文讲述了如何使用postcss-pxtorem插件将px值转换为rem，包括安装步骤、在Vue-cli项目中配置.postcssrc.js以消除警告，并说明了如何处理已有的van组件和自定义样式转换问题。

需要注意

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

在这里插入图片描述

在这里插入图片描述

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

愿➣
关注
Vant 的 rem 引用
爱睡的虫虫
04-11 331
引入： 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...
vue3移动端使用Vant、rem安装使用详细过程以及vite这种方式的使用过程
jjw_zyfx的博客
04-01 1313
vue3移动端使用Vant、rem安装使用详细过程以及vite这种方式的使用过程
vue3+vant 移动端适配
Wave__k的博客
06-24 624
postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem。lib-flexible 用于设置 rem 基准值。
手写rem 与 移动端vant配置rem(2)
2401_84092360的博客
04-17 775
图例:是一款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
走走停停
11-23 2025
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
vue项目移动端适配rem
m0_65331985的博客
10-20 616
vue项目移动端适配rem
精选资源
基于 Vue3 + Vite + TS 的移动端 rem 适配技术详解
最新发布
12-09
使用场景及目标：本指南适用于正在进行移动端开发的团队和个人，旨在帮助他们掌握 Vue3 + Vite + TS 架构下实现 rem 适配的具体方法，从而提升应用的用户体验。 阅读建议：在阅读本文档时，建议实际操作并结合项目...
Vue在移动端基于rem适配实现思路及过程
qq_49896911的博客
06-21 1076
vue，vant，移动端适配
vuevantUIaxios移动端项目rem做适配
08-10
5. 移动端适配策略：在移动端项目中，通常采用Flexbox布局或Grid布局来实现响应式设计。项目可能运用了这些技术，确保元素在不同屏幕尺寸下都能正确排列和显示。 6. Babel：由于部分旧版浏览器不支持ES6以上的语法...
导入移动端组件库vant和移动端rem的适配
weixin_44803302的博客
08-15 704
导入 Vant 组件库 Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。 官方文档 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。 下面是在 Vant 官网中列出的一些优点： 60+ 高质量组件 90% 单元测试覆盖率 完善的中英文文档和示例 支持按需引入 支持主题定制 支持国际化 支持 TS 支持 SSR 将 Vant 引入项目一共有四种方式： 方式一：自动按需
Vant rem适配
Xiaocong__的博客
12-31 2141
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 366
在终端输入: npm i amfe-flexible 在main.js中导入模块 ： import 'amfe-flexible' 在终端输入: npm install postcss-pxtorem -D 在项目根目录中创建 .postcssrc.js 文件 并敲入如下代码 ???? module.exports = { plugins: { //样式规则前缀（由于在服务器中会警告故在此注释掉） /*'autoprefixer':{ browsers: ['Android >=
vue3.0使用vant组件的过程
wjw0125的博客
05-31 2130
创建项目 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 826
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取[外链图片转存中…(img-sdx4OIBy-1712364385865)]
移动端初始化
LY_MI_MANCH的博客
04-21 457
移动端 REM 适配 Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配置到项目中完成 REM 适配。 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 1、安装 # yarn add amfe-flexible npm i amfe-flexible
vant 移动端rem适配
bamboozjy的博客
12-18 563
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_46163107的博客
11-01 310
vant官网截图 npm i amfe-flexible npm install postcss-pxtorem -D postcss.config.js默认配置???? 要把 browsers 选项写到 package.json 或 .browserlistrc 文件中。不然会有警告 如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为: 大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。 但是 Va
移动端适配教程：rem转换与amfe-flexible实践
本文档是一份详细的移动端适配教程，主要关注于如何利用`rem`单位来实现响应式设计。首先，我们将了解`rem`相关的配置步骤。 1. 安装插件：为了实现自动的px到rem转换，文档推荐使用PostCSS和两个插件——`postcss-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值