vant实现移动端的适配

最新推荐文章于 2023-12-04 17:45:03 发布

原创

最新推荐文章于 2023-12-04 17:45:03 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #web app

最近公司做一个移动端的项目，需要做适配，框架本身是提供了vue-cli3.0结合lib-flexible和px2rem实现移动端适配的方案，这里记录下自己做适配的方法。

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

安装amfe-flexible

 1. npm i -S amfe-flexible

在main.js文件中引入lib-flexible

import 'amfe-flexible/index.js'

安装postcss-pxtorem

 npm install postcss-pxtor

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

紫轩阁

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【前端 Uniapp】使用Vant打造Uniapp项目（避坑版）

m0_74824877的博客

12-11

6490

Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。

vant构建移动端页面

hhxID的博客

08-24

508

导入CDN链接,通过全局变量vant访问到所有组件。

参与评论您还未登录，请先登录后发表或查看评论

vue移动端 vant适配

huxue12的博客

03-10

2421

vue + vant 适配

Vant移动端

gr6666gr的博客

07-07

510

移动端vant

vue结合vant做一个基础的移动端页面

july_29的博客

07-15

1240

一个顶部导航，一个底部tabbar，切换页面时候顶部导航标题跟着切换。

如何使用postcss-px-to-viewport-8-plugin 配合Vant实现移动端适配

最新发布

03-10

下面是使用postcss-px-to-viewport-8-plugin配合Vant实现移动端适配的步骤： 1. 首先，在项目中安装postcss-px-to-viewport-8-plugin和Vant： ``` npm install postcss-px-to-viewport-8-plugin vant ``` 2. 在...

vue+vant移动端适配

WhyBecause的博客

01-07

2446

方式一：使用 lib-flexible 和 px2rem-loader，遇到的坑，设计稿为750px，后引入vant,vantUI的根字体默认大小是37.5，看起来就是1/2，解决方法，删除main.js中vant样式的引入，在app.vue中引入vant样式 <style> /* px2rem不能正常转换 */ @import "vant/lib/index.css"; </style> 方式二：lib-flexible + postcss-pxtorem （postcss-px

Vue-Vant2-移动端项目适配

AKindofo的博客

07-03

1565

Vue 框架移动端适配

Vue3+vant4适配移动端

明知山

01-02

1291

【代码】Vue3+vant4适配移动端。

项目使用vant框架实现移动端适配

qq_43532275的博客

12-10

1693

使用vant框架根据原型图开发时尺寸转换

快速解决vue2+vue-cli3项目ie兼容的问题

01-18

刚写好的项目在谷歌能打开，ie打不开，需要处理兼容问题先根据这篇文章修改详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决如果没有其他问题是可以了的，下面是我代码中出现的其他问题导致页面无法显示或者报错 sockjs报错控制台会一直报这个错，sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端：sockjs-node（https://github.com/sockjs/sockjs-node）客户端：sockjs-clien（https://github.co

uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题

商务合作 / 项目定制开发 / 前端一对一培训、答疑

12-04

9978

解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。

vant ui 官方文档_基于vue的UI框架集锦(移动端+pc端)

热门推荐

weixin_39621427的博客

12-13

3万+

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k中文文档在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。中文文档在线预...

vue项目兼容老IE

W-Mo-Mo的博客

02-07

441

为满足客户需求，对vue项目做兼容IE处理，使用的IE浏览器版本为11.0.9600.19625。在 main.js 中的最前面引入 babel-polyfill。安装babel-polyfill依赖，解决es6语法的兼容问题。在babel.config.js中。

vant使用

smq1460370542的博客

04-13

625

vant

Vue项目自动转换 px 为 rem

hammer1010的博客

05-21

2526

Vue项目自动转换 px 为 rem 前提条件 1.脚手架vue-cli 搭建好 2.vue项目可以正常运行 1、创建rem.js文件创建一个utils文件，添加一个rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const...

uniapp引入vantUI库

零度空间

12-16

2852

image.png uniapp引入vantUI库下载vant组件 vant的GitHub下载地址下载完成后解压，然后在项目更目录下创建文件夹wxcomponents，注意这里的wxcomponents目录级别和pages在同一级别，然后再该目录下创建vant目录。回到刚才解压的vant目录，找到dist文件夹，把它复制到vant目录下 image.png 引用vant组件 ...

app开发使用vant组件之van-list

Qiubaozhen的博客

07-08

2373

本篇给那些初试app开发的码农，大佬如果有建议，欢迎留言~~首先开发app会有多种方式，html+各种框架，vue-cli脚手架+各种依赖。脚手架的话，直接在vant官网教程里就有,vant官网地址Vant 3 - Mobile UI Components built on Vue 上边是两种安装依赖方法，可自行去官网查看，这里有个问题需要说一下，vue3有可能你在创建项目的时候规定用es6写法，这个时候会报is notdefind，然后查找之后发现是vant里边有es5的写法，这个时候用npm unins

vue-cli3移动端自适应配置 Vant组件库

qq_43430897的博客

07-01

4230

Vant：轻量、可靠的移动端 Vue 组件库（推荐使用）通过vue-cli搭建完项目后开始进行vant配置第一步：安装vant npm i vant -S yarn add vant 第二步：引入组件（推荐自动按需引入组件） ① 安装插件 npm i babel-plugin-import -D ②在babel.config.js中进行配置插件： module.exports = {...