Vue实现屏幕分辨率自适应之一（伸缩布局 lib-flexible）

最新推荐文章于 2023-10-24 17:42:51 发布
原创 最新推荐文章于 2023-10-24 17:42:51 发布 · 5.6k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了如何在Vue项目中实现屏幕自适应，通过使用阿里lib-flexible库和px2rem插件，将px转换为rem单位，确保在不同分辨率下良好显示。详细步骤包括安装依赖、修改flexible.js、配置px2rem，并通过实际测试验证效果。

新建Vue项目

步骤网上资料很多，这里不再赘述！

安装依赖

1.安装阿里可伸缩布局依赖lib-flexible

npm i lib-flexible -S

2. 安装px转rem依赖px2rem

npm i px2rem -S

3.在项目的入口文件 main.js 里引入 lib-flexible

import "lib-flexible"

在这里插入图片描述
因为依赖中当屏幕宽度大于540后，width固定写死了，需要修改依赖文件lib-flexible/flexible.js
在这里插入图片描述

4.验证一下是否起作用

在App.vue中写两个div进行测试

最低0.47元/天 解锁文章
vue 如何PC端不同屏幕大小分辨率自适应
huihuiliu_的博客
03-12 1万+
需求：vue自适应屏幕分辨率PC端      如果你做了一个vue的pc端项目，但是需要适应不同的分辨率和屏幕大小，你会发现在1080p*1920下开发的页面，把分辨率切换到1366或者其他的时候，页面会变得非常丑，字体变得超级大，还会换行等等，也许有很多公司都不会做这项业务，因为pc端项目，特别是后台管理，很少做分辨率自适应，但是如果有此需求呢 所以来开干吧，废话不多说，上代码吧！！！！！ 1、安装  postcss-px2rem及px2rem
vue自适应布局（各种浏览器，分辨率）
热门推荐
weixin_42974827的博客
09-04 3万+
主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动，后续我会把完整代码放在个人主页KinHKin的博客_优快云博客-vue,中秋活动,性能优化领域博主的资源里面，供大家免费下载，希望大家能够喜欢💗💗💗。
vue实现PC端分辨率适配操作
10-15
主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目屏幕自适应_vue项目自适应屏幕和浏览器
weixin_36002026的博客
12-24 2696
1.安装依赖npm i lib-flexible -Snpm i px2rem-loader -D2.在src文件夹下新建utils文件夹，在utils文件夹下新建flexible.js,其代码如下(function() {// flexible.cssvar cssText ='' +'@charset "utf-8";html{color:#000;background:#fff;overfl...
vue项目实现自适应屏幕分辨率
maohangfei.cn
05-08 2445
适应不同分辨率的屏幕
阿里手淘可伸缩布局方案amfe-flexible解决vue移动端适配问题
唐立彤的博客
04-16 1万+
前言: 由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。 1.首先把安装amfe-flexible，这里使用npm install npm install -S amfe...
@vue/cli 实现pc端分辨率适配(可用于大屏开发)
L_Sarah的博客
01-15 1438
参考文章: https://blog.csdn.net/weixin_41257563/article/details/97266234 项目框架: 项目是基于vue-cli3生成的工程化项目 vue create projectName 依赖: 1.自适应方案核心： 阿里可伸缩布局方案 lib-flexible 2.px转rem：px2rem，它有webpack的loader: px2rem-loader 一.安装 yarn add lib-flexible -S yarn add px2rem-lo
vue实现PC端rem自适应适配。
weixin_48674314的博客
08-09 4231
安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible。依赖： 项目基础配置使用vue-cli2生成 自适应方案核心： 可伸缩布局方案lib-flexible。 px转rem：px2rem，它有webpack的loader px2rem。 开始： 使用npm 安装 lib-flexible和px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之后还需要在项目的入口文件 mai...
vue 自适应屏幕分辨率，在不同分辨率，以及缩放都按照设计稿展示
qq_39548550的博客
11-03 1万+
vue项目自适应1920或者1366的分辨率
vue+rem自适应pc端屏幕分辨率(rem适配)
Jenny_ljj的博客
04-14 8195
vue+rem自适应pc端屏幕分辨率(rem适配) 前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以不要写内联样式 第一步，安装postcss-px2rem及px2rem-loader npm install postcss-px2rem px2rem-loader --save 第二步，在根目录src中新建util目录下新建rem.js等比适配文件 // rem等比适配配置文件 // 基准大小 const baseSiz
Vue项目下页面自适应pc端不同分辨率自适应
Cheris_LT的博客
10-24 2686
1、lib-flexible插件，引入 lib-flexible插件，使 用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。2、postcss-px2rem、px2rem-loader插件，作用为把px转变为rem。首先在main.js中引用：（可以使用npm下载，也可以直接下载文件，我这边是下载的文件）为了方便我们的快速应用，直接使用插件。别忘了在vue.config.js文件中的chainWebpack中配置。
Vue 分辨率 自适应
weixin_43805387的博客
12-02 3055
document.documentElement.clientHeight resultHeight: document.documentElement.clientHeight - 610 + “px”,
vue数据大屏自适应屏幕分辨率js
weixin_56246444的博客
03-15 1282
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题，按照设计图的百分比写感觉太麻烦，宽高甚至字体大小都要用百分比，就在想有没有其他的方案能实现，相信都用过rem单位，此篇是就rem自适应屏幕分辨率写出js 当然也参考了别人的文档，融合之后变成自认为最好用的一个版本 下面是js代码 ; (function(win, lib) { var doc = win.document; var docEl = doc.documentElement; va
Vue实现PC端分辨率自适应
Maggieq8324的博客
12-25 9222
方案 lib-flexible+ px2remLoader lib-flexible：阿里可伸缩布局方案 px2rem-loader：px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem ...
Vue2.0实现自适应分辨率
LeftStrang的专栏
11-25 3639
Vue2.0+elementUI 实现自适应分辨率
vue框架根据屏幕分辨率 及 缩放自适应
Frank_Zero的博客
05-18 966
【代码】vue框架根据屏幕分辨率 及 缩放自适应。
【个人笔记】Vue可视化大屏 分辨率自适应 整屏缩放
wzw1110的博客
02-10 1023
【代码】【个人笔记】Vue可视化大屏 分辨率自适应 整屏缩放。
vue 如何让PC端不同屏幕大小分辨率自适应（屏幕自适应）（postcss-px2rem、px2rem-loader、lib-flexible）
qq_37831545的博客
07-16 1万+
vue 如何让PC端不同屏幕大小分辨率自适应（屏幕自适应）（postcss-px2rem、px2rem-loader、lib-flexible）
使用Vue-cli与lib-flexible+rem实现移动端适配教程
"选取存放文档位置-基于vue-cli配置lib-flexible + rem实现移动端自适应" 在移动端开发中，实现屏幕自适应是一项重要的任务，尤其是在构建Web应用时。Vue CLI 是一个强大的前端构建工具，它提供了便捷的方式来配置...
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值