vue 项目适配笔记本1920*1080 125%缩放 |
您所在的位置:网站首页 › 1366*768分辨率和1920*1080分辨率区别 › vue 项目适配笔记本1920*1080 125%缩放 |
前言
在台式机上开发pc端项目时,由于是1920*1080的分辨路和100缩放,看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本,出厂默认就是125%或150%的显示。导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题。 网上有很多解决方案,但都是治标不治本,表面上是适配了,但是有很多坑。效果不是很好。 比如布局挤变形了,第三方组件变形,按钮错位,部分白屏,执行不了。看着很不舒服。 网上解决方案-可以先试一下看效果vue项目下,笔记本显示跟PC显示比例为125%、150%对页面造成的影响_一起搞前端的博客-CSDN博客 解决前端页面在笔记本和台式显示器比例大小不一问题(适配笔记本125% 150%缩放解决方法)_@小匠的博客-CSDN博客_笔记本设置了缩放,前端如何适配 禁止web页面缩放解决方案 - 掘金 笔记本默认设置125%或者150%缩放,导致布局错乱的解决方法 - 孙凯亮 - 博客园 我的解决方案-思路1.笔记本缩放(125%或150%)本质是看起来舒服,但实际是更改了视口大小--就是要适配不同分辨率屏幕 2.尽量使用100%布局,这样不管视口分辨路怎么变都是从100里面分,不会受到影响 3.行内样式不会生效,像element-ui表格设置height如果是px就会把页面撑变形,改成父元素的%比(比如50%) 4.如果项目中有使用canvas或者别的相关技术,就要在这个页面监听浏览器是否缩放,来改变大小。 5.最后直接把屏幕在设置中调成125%或150%,来看效果,直接适配 实现1.适配不同分辨率屏幕--主页文章有[Vue pc端适配不同分辨率屏幕]
2.根据实际情况,编写样式 3.修改表格之内的行高(height="70%") 父级元素要设置高,要不然没效果 4.在有用到canvas技术的页面监听浏览器缩放,条件成立就是浏览器缩放,给他开关打开,改变canvas大小 return { // 笔记本开关 windowlen: false, // 监听是否在笔记本上-监听浏览器 screenWidth: document.body.clientWidth, } watch: { // 监听是否在笔记本上-监听浏览器 screenWidth: { immediate: true, handler: function (newVal) { console.log('浏览器大小', newVal) if (newVal != 1920) { console.log('执行了', newVal != 1980) this.windowlen = true } } } }, mounted() { // 监听是否在笔记本上-监听浏览器 const that = this window.onresize = () => { return () => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth } } }, beforeDestroy() { // 离开页面是清空 this.windowlen = false }, // 判断笔记本上运行 if (this.windowlen) { console.log('笔记本浏览', this.windowlen) // 注意不要加px this.canvas.width = 780 this.canvas.height = 435 }5.把屏幕调成125%缩放,完成其他细节。150%缩放同理。 总结: 经过这一趟流程下来相信你也对 vue 项目适配笔记本1920*1080 125%缩放 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人! 什么不足的地方请大家指出谢谢 -- 風过无痕 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |