# 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
相关推荐
代码代码快快显灵4 分钟前
Axios的基本知识点以及vue的开发工程(基于大事件)详细解释
前端·javascript·vue.js
文心快码BaiduComate4 分钟前
再获殊荣!文心快码荣膺2025年度优秀软件产品!
前端·后端·代码规范
Mintopia5 分钟前
🚀 Next.js 后端能力扩展:错误处理与 HTTP 状态码规范
前端·javascript·next.js
IT酷盖6 分钟前
Android解决隐藏依赖冲突
android·前端·vue.js
mwq301239 分钟前
RNN 梯度计算详细推导 (BPTT)
前端
mogexiuluo10 分钟前
kali下安装beef-xss报错-启动失败-简单详细
前端·xss
y_y28 分钟前
Streamable HTTP:下一代实时通信协议,解决SSE的四大痛点
前端·http
无羡仙35 分钟前
流式输出SSE
前端
小噔小咚什么东东1 小时前
Vue开发H5项目中基于栈的弹窗管理
前端·vue.js·vant
OpenTiny社区1 小时前
基于华为云大模型服务MaaS和OpenTiny框架实现商城商品智能化管理
前端·agent·mcp