VUE自适应设置

VUE自适应设置

第一次发文章,不懂得什么流程。。
之前在做页面的时候经常因为自己屏幕小,放到不同分辨率的屏幕就不能达到自己屏幕的大小,百分比不行,获取屏幕宽度再去设置大小也不行(或许我本来就懂的少 = =)
今天突然想到一个办法,就是先获取自己的屏幕宽度,先给打印出来
var orderWidth = document.body.scrollWidth * 1
var orderHeight = document.body.scrollHeight * 1
alert(orderWidth)
alert(orderHeight)
假如我的屏幕大小是 长是800px 宽是400px (这样说的比较清楚)
目标显示器的大小是 长是1000px 宽是600px(也是随便的比例)
先在mounted初始化中获取目标显示器的大小
然后 就是这个公式 1000/800 = 1.25 600/400 = 1.5(这个就是获取的系数)
加入要放一个id为a 的 div 放在 left: 100px top: 100px 的位置

主要是要设置这个id 然后在mounted初始化中获取这个id的div
var a = document.getElementById('a')
a.style.left = 100 * 1.25 + 'px'
a.style.top = 100 * 1.5 + 'px'
a.style.height = 100 * 1.5 + 'px';
a.style.width = 100 * 1.25 + 'px'
通过乘上对应的系数,就可以放在每个屏幕的固定位置了。
最后,我感觉这样做确实很麻烦。。也是今天突发想到了。。如有雷同,那真的是意外= =。
展开阅读全文

没有更多推荐了,返回首页