vue自适应屏幕大小布局，适应性宽高

2024-07-16 23:45| 来源: 网络整理| 查看: 265

设置一个div不论换到什么样比例的屏幕上都能合理舒服的显示

这个宽度很好设置直接style=“width：100%”就行了，但是高度不太好弄，方法如下：

首先，在data里定义一个height：

data() { return { height: '', } }

页面加载时：

created() { this.height = document.documentElement.clientHeight - 90; },

这样就基本上把我们需要的配置好了，现在我们去template里去使用它

首先在布局的最外层我们用到:style

红色的部分就是你需要加上去的内容这样这个div就已经可以自动获取你的屏幕大小并自己去适应宽高了，

如果你要在这个div里面嵌套内部的div,直接给这个内部div的高度设置百分比就行了，注意这里的百分比，是相对于外层div的百分比：

但是如果你想在内部div里再次嵌套一个div，仍然也想让他自适应宽高，有意思的就来了

你需要算数了这个第三个div假设他想要占第二个div内部20%的空间你需要这么写：

【本文地址】

今日新闻