公司项目做之前没有沟通好，按照1920*1080设计图做的页面，缩放比是100%，项目做完之后说要适配缩放比，并且工控屏（分辨率1024*768），需要做小屏适应。
开发中一般pc端都是不用怎么考虑去适配屏幕的，因为现在的屏幕分辨率都是1960*1080，所以正常的前端页面都是可以适配的。
项目技术栈：vue2+elementUI
一 . 需求
分辨率：
pc：1920*1080
工位机：1024*768
二 . 解决方案
1.使用scale-box 组件
主要针对大屏可视化，适用于个别大屏适配，不能全局适配，但是侧边会留白居中
2.使用JS 设置 zoom 属性调整缩放比例 （调试可用）
可以全局设置 但是会出现缩放比例失调 部分ui布局也会改变
使用属性zoom，会导致一些问题比如使用了element的一些组件，下拉选项，下拉会出现偏移的现象
3.使用postcss-px2rem以及postcss-px-to-viewport
通过px转rem以及vw的方案 虽然能全局使用 这些插件对行内样式不起效果 总的来说，不太适合已经成型的项目,还是会导致样式丢失
三 . 方案选择
考虑已经成型的项目，无法逐一进行适配，所以针对那些px转rem以及vw的方案不能使用，代码调整处过多，故只能对页面进行一个强行缩放，去保证小屏下的布局样式不会乱同时功能也正常。
以上三种都试过了，由于针对我的项目情况，我选的是第二种进行设置 zoom 属性调整缩放比例，最为稳妥。其他的我不在逐一述说，接下来主说我选的合适方案。
四 . 方案处理
1.在src同级目录下utils文件中创建monitorZoom.js 内容如下
export const monitorZoom = () => {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
};
2.在入口文件main.js中
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
document.body.style.zoom = 100 / Number(m);
}3.通过路由前置守卫 控制某一个路由页面合适的缩放
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
router.beforeEach((to, from, next) => {
console.log("即将跳转到的路由 ------------------------ > " + to.name);
/* 调整缩放比例 start */
//针对工控屏调整的缩放比
if (to.name === 'home' && window.screen.width <= 1024) {
document.body.style.zoom = 60 / Number(m);//60是对着屏幕具体调的，因屏而异
}else {
document.body.style.zoom = 100 / Number(m);
}
/* 调整缩放比例 end */工控端界面的话合适比例为document.body.style.zoom = 60 / Number(m);文章来源：https://www.toymoban.com/news/detail-687365.html
同时需要解决刷新缩放丢失问题，刷新的时候重新计算缩放比文章来源地址https://www.toymoban.com/news/detail-687365.html
到了这里，关于vue2项目PC端自适应屏幕的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
