# vue3 实现web网页不同分辨率适配

vue3 实现web网页不同分辨率适配

首先这个标题可能不是特别的合适,之前开发了一个网站,那个网站是类似于官网的效果,按照 19201080 100% 的分辨率进行开发的,但是在开发完成之后,发现有的电脑是 19201080125% 的大小展示的,这样的话,有些地方可能展示就会出一些问题。当然了可以用第三方的一些插件进行处理,也可以自己想办法处理一下,这篇博文就是靠自己处理,简单写一下思路。

内容

首先,最显而易见的操作就是开发的过程中尽可能用弹性盒子布局,组建页面的时候尽可能使用百分比布局。其次,在设置文本大小、间距这类的数据时候,需要使用 rem 进行设置,而不是 px

这里推荐一个 vscode 编辑器好用的 rem 转换工具,叫 "px to rem & rpx & vw (cssrem)"。

这个插件还是可以的!

然后呢,做完了这些的话,就简单了,我们在加载完页面的时候,先判断一下,这个浏览器的宽度是不是 1920 的,因为我们是按照宽度是 1920 的分辨率开发适配的,如果不是的话,我们需要根据当前的宽度,结合我们设计的比例,重新算一下,当前需要给html设置的 font-size 大小是多少(默认是16px)。然后就可以啦!'

typescript 复制代码
// APP.vue
onMounted(() => {
  let docEl = document.documentElement;
  let clientWidth = docEl.clientWidth;
  docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
});

这样在我们打开页面的时候他会计算当前页面宽度与设计图宽度1920的比例,然后重新设置html标签的font-size属性值

这样我们的页面就可以拉回到设计图的大小了。

问题

这样实现的话存在一些问题:

  1. 网页中的 px 单位需要改成 rem 单位,如果开发没考虑,后期修改任务量会很大;
  2. 对于一些第三方组件可能无法实现适配,因为三方插件中内部使用的单位为px
相关推荐
叶玳言6 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳6 小时前
HTML 基本结构
前端
Gazer_S6 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐6 小时前
Html重绘和重排
前端·html
_Rookie._6 小时前
vue3 使用css变量
前端·javascript·html
杨超越luckly6 小时前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦7 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
GIS之路7 小时前
GDAL 开发起步
前端
被巨款砸中7 小时前
前端视角下的 Web 安全攻防:XSS、CSRF、DDoS 一次看懂
前端·安全·xss
excel8 小时前
CSS 里的斜杠 /:你可能忽略的小细节
前端