Vant 的 rem 引用

最新推荐文章于 2024-04-06 08:48:14 发布
最新推荐文章于 2024-04-06 08:48:14 发布
阅读量331 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： vant rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/feifanzhuli/article/details/105446051
本文详细介绍了在Vant项目中如何配置和使用rem单位，通过main.js的设置以及postcss.config.js的配置文件来实现响应式布局。

引入：

npm i lib-flexible -S

npm i postcss-pxtorem -D

main.js

import "lib-flexible/flexible";

项目根目录下创建：

postcss.config.js

//postcss.config.js
module.exports = {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue中引用了vant插件怎么使用rem自适应——postcss/flexible
impossible1994727的博客
04-16 1387
首先下载vue ：https://github.com/adventurewithme/vue_demo 这个是最初始的空白vue。 安装vant： # 通过 npm 安装 : npm i vant -S # 通过 yarn 安装 : yarn add vant Rem 适配 postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem:npm install...
在移动端 h5传统项目中使用vantui 并rem兼容适配
qq_21437991的博客
03-01 1570
自己尝试了把源码css拉下来改源码，把px改为rem，结果发现没卵用，可能因为px涉及的地方太多了改的不全导致效果不好吧。（这中间走了很多弯路，网上有说使用mini-css-extract-plugin的，然后各种复杂的配置，一顿折腾也是不行。发现浏览器页面style标签里面的css样式超长被截断了，复制出来也不全，根本没法用。至此，如果我的朋友是要用工程构建项目，那现在就可以快乐的使用vantui 的rem方式进行响应式开发了。所以想到工程类的项目可以利用webpack将css抽取出来作为单独的文件。
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
Vant组件库移动端Rem适配
weixin_47958188的博客
07-08 2101
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配置到项目中完成 REM 适配。 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 1、安装 # yarn add amfe-flexible npm i amfe-flexible 2、然后在 main.
【Vant的Rem适配方案】
luoxindong的博客
11-30 7640
Rem适配 Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值. PostCSS 配置 1.在根目录下新建一个postcss.config.js 2.下载 npm install postcss-pxtorem --save...
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的适配
weixin_44803302的博客
08-15 704
导入 Vant 组件库 Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。 官方文档 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。 下面是在 Vant 官网中列出的一些优点： 60+ 高质量组件 90% 单元测试覆盖率 完善的中英文文档和示例 支持按需引入 支持主题定制 支持国际化 支持 TS 支持 SSR 将 Vant 引入项目一共有四种方式： 方式一：自动按需
Nuxt引用vant+px2rem适配移动端开发
明知山
01-16 1280
npm i vant -S //安装vant npm i babel-plugin-import -D //按需引入 在plugins文件夹新增vant.js文件 引入Button组件为例 import Vue from "vue"; import 'vant/lib/index.css'; import { Button } from "vant"; Vue.use(Button); 在nuxt.config.js文件进行配置 plugins: [ '@/plugins/vant'
移动端初始化
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
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(3)，知乎上转疯了
2401_84091742的博客
04-06 1062
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。要。喜欢看书就看书，喜欢看视频就看视频。
移动端Vant-Ui库以及适配Rem插件
liuhongsai0616的博客
01-06 1121
移动端适配插件
vue+vant项目中 rem适配配置
meteorites的博客
02-10 4070
vant rem适配，需要安装两个插件 postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem lib-flexible用于设置 rem 基准值 postcss-pxtorem： npm install postcss-pxtorem --save-dev lib-flexible： npm i -S amfe-flexible main.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 >=
移动端适配rem（Vant）
weixin_59527403的博客
12-16 566
移动端适配
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
vue项目中引入vant 使用rem布局问题
dbp47524的博客
01-23 1028
postcss.config.js const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxtorem') module.exports = ({ file }) => { let rootValue // vant 37.5 https://g...
pnpm 安装vant 并全局引用 并rem布局
最新发布
09-13
<think> 我们参考了引用[1]中提到的npm安装方式，但用户要求使用pnpm安装Vant。pnpm的使用方式与npm类似，只需将npm命令替换为pnpm即可。 同时，用户希望全局引用Vant并实现rem布局。 步骤： 1. 使用pnpm安装Vant - 根据项目使用的Vue版本选择安装对应的Vant版本（Vue 3对应最新版Vant，Vue 2对应Vant 2） 2. 全局引入Vant - 可以在main.js（或main.ts）中全局引入Vant组件和样式 3. 实现rem布局 - 安装postcss-pxtorem插件，用于将px单位转换为rem单位 - 配置vant的样式基准值（Vant默认使用37.5px作为设计基准，但可以通过配置调整） - 设置html元素的font-size，通常使用lib-flexible或amfe-flexible来根据设备宽度动态设置font-size 具体步骤： 一、安装Vant 对于Vue 3项目： ```bash pnpm add vant ``` 对于Vue 2项目： ```bash pnpm add vant@latest-v2 ``` 二、全局引入Vant 在项目的入口文件（如src/main.js或src/main.ts）中： ```javascript import { createApp } from 'vue' import App from './App.vue' import Vant from 'vant' import 'vant/lib/index.css' const app = createApp(App) app.use(Vant) app.mount('#app') ``` 三、实现rem布局 1. 安装必要的依赖： - amfe-flexible：用于设置动态的根元素font-size - postcss-pxtorem：用于将px转换为rem ```bash pnpm add amfe-flexible postcss-pxtorem -D ``` 2. 在入口文件中引入amfe-flexible（通常在main.js中）： ```javascript import 'amfe-flexible' ``` 3. 配置postcss-pxtorem。可以在项目根目录下创建postcss.config.js文件，配置如下： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // Vant设计稿基准为37.5（设计稿宽度375px），如果设计稿是750px，则设置为75。但Vant的样式是基于375px设计的，所以这里建议设置为37.5，这样Vant的样式可以正确转换。 propList: ['*'], // 需要转换的属性，*表示所有属性 selectorBlackList: ['.norem'] // 过滤掉.norem开头的class，不进行rem转换 } } } ``` 注意：如果你的设计稿是750px（即设计稿宽度为750px），那么你在编写自己的样式时，可以按照设计稿的尺寸除以2来写（因为750的设计稿1px相当于设备宽度的1/750，而375的设计稿1px相当于1/375，所以750设计稿的1px相当于375设计稿的0.5px，因此除以2）。而Vant组件是按照375px设计稿设计的，所以我们在配置postcss-pxtorem时，rootValue设置为37.5（即37.5px=1rem）即可同时适配Vant和自己的样式（自己的样式按750设计稿写，然后除以2，再被转换为rem，这样在375屏幕上就会显示正常）。 另一种做法：如果不想自己手动除以2，可以将rootValue设置为一个函数，根据不同的文件路径返回不同的值。比如，对于node_modules中的vant文件，使用37.5，对于自己的样式文件，使用75。配置如下： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75; }, propList: ['*'], selectorBlackList: ['.norem'] } } } ``` 这样配置后，在编写自己的样式时可以直接按照750设计稿的尺寸来写（单位px），在编译时会转换为rem（除以75）。而Vant的样式则除以37.5，保持Vant的正常显示。 4. 在public/index.html中添加视口标签（如果已有则忽略）： ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` 完成以上步骤后，项目就支持rem布局了。 注意：在开发过程中，设计稿上的尺寸如果是750px，那么在写样式时，直接使用设计稿上的像素值，例如设计稿上宽度为100px，则写100px，postcss-pxtorem会将其转换成(100/75)rem。而对于Vant组件，其内部的样式都是基于375px设计稿（即37.5的rootValue）转换的，所以显示正常。 如果遇到问题，检查配置是否正确以及是否重启了开发服务器（因为配置postcss.config.js后可能需要重启）。 引用说明： [^1] 提供了npm安装Vant的方式，我们类比使用了pnpm安装。 [^2] 提供了CDN引入方式，但这里我们使用pnpm安装并在项目中引入，因此不采用CDN方式。 相关问题： 1. 如何按需引入Vant组件？ 2. 在Vue项目中如何配置postcss插件？ 3. rem布局和vw布局有什么区别？ </think> ### 使用 pnpm 安装 Vant、全局引用并实现 rem 布局 #### 1. **使用 pnpm 安装 Vant** 根据 Vue 版本选择安装命令： ```bash # Vue 3 项目 pnpm add vant # Vue 2 项目 pnpm add vant@latest-v2 ``` #### 2. **全局引入 Vant** 在入口文件（如 `main.js` 或 `main.ts`）中全局注册： ```javascript import { createApp } from 'vue' import App from './App.vue' import Vant from 'vant' import 'vant/lib/index.css' // 引入全局样式 const app = createApp(App) app.use(Vant) // 全局注册组件 app.mount('#app') ``` #### 3. **实现 rem 布局** **步骤说明：** 1. **安装依赖** 安装 flexible 和 postcss 插件： ```bash pnpm add amfe-flexible postcss-pxtorem -D ``` 2. **设置基准值** 在入口文件中引入动态 rem 适配： ```javascript // main.js import 'amfe-flexible' // 自动设置 html 的 font-size ``` 3. **配置 postcss** 创建 `postcss.config.js` 文件： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // Vant 设计稿基准（375px 宽） propList: ['*'], // 转换所有属性的 px 单位 selectorBlackList: ['.norem'] // 忽略 .norem 开头的类 } } } ``` 4. **HTML 视口设置** 在 `public/index.html` 中添加： ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` #### 4. **验证 rem 布局** 在 CSS 中直接使用 px 单位，编译后会自动转换： ```css /* 输入： */ .container { width: 375px; } /* 输出： */ .container { width: 10rem; /* 375px / 37.5 = 10rem */ } ``` #### 注意事项： 1. **设计稿适配** - 若设计稿为 750px，将 `rootValue` 设为 75（750 / 10） - Vant 组件默认按 375px 设计，无需额外调整[^1] 2. **忽略特定样式** 添加 `.norem` 前缀避免转换： ```css /* 不会被转换 */ .norem-box { border: 1px solid #ccc; } ``` --- ### 引用说明 [^1]: Vant 官方推荐使用 37.5px 作为 rem 基准值，确保组件尺寸适配移动端 [^2]: 全局引入需加载完整样式文件，若需按需加载可配合 `unplugin-vue-components`
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值