vue 项目适配笔记本1920*1080 125%缩放 |
您所在的位置：网站首页 › 笔记本1920*1080是多少尺寸 › vue 项目适配笔记本1920*1080 125%缩放 |
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%缩放 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！ 什么不足的地方请大家指出谢谢 -- 風过无痕 |
【本文地址】
今日新闻 |
推荐新闻 |