VUE 移动端自适应

最新推荐文章于 2025-06-25 09:08:29 发布

Max伏虎

最新推荐文章于 2025-06-25 09:08:29 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_40725601/article/details/89417377

vue 专栏收录该内容

5 篇文章

订阅专栏

本文讨论了在移动端开发中实现自适应布局的必要性，针对不同设备屏幕大小的问题，提出了使用VUE结合MUSE-UI组件库，通过安装lib-flexible依赖，并在需要自适应的场景下使用rem单位来解决问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

在做移动端开发时，适应各种移动设备是开发人员必须要考虑的一点。客户们的喜好不同，有人喜欢屏幕大的气派、上档次，而另一部分比较低调、小点轻便。
所以如下，是没有做自适应时的案例，设备不同，样式。
在这里插入图片描述

解决方案

项目是 VUE 脚手架并引入了 MUSE-UI 组件库, 此处不用 flexible 在 util 中的配置是因为，它会影响到 MUSE-UI 的组件，从而使组件变得非常小。所以这里还是使用 rem 为单位，而是在需要自适应时，使用 rem, 不需要时使用px。

解决步骤

一、安装依赖

1. npm i lib-flexible

2. import 'lib-flexible'  // main.js 中引入

在这里插入图片描述

二、使用 vs-code 快捷转换

1. 安装px to rem,

在这里插入图片描述

2. 首选项中配置

在这里插入图片描述

3. 使用

在这里插入图片描述

解决后的效果

在这里插入图片描述

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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