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

我是ed2025-08-12 15:55

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属性值。

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

问题

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

网页中的 px 单位需要改成 rem 单位，如果开发没考虑，后期修改任务量会很大；
对于一些第三方组件可能无法实现适配，因为三方插件中内部使用的单位为px；