关于响应式的改变HTML元素高度（元素宽高绑定、保持宽高比）

最新推荐文章于 2024-03-20 16:01:53 发布

渝涅

最新推荐文章于 2024-03-20 16:01:53 发布

阅读量2.9k

点赞数 1

分类专栏： web 文章标签： js css javascript html jquery

本文链接：https://blog.csdn.net/qq_43878324/article/details/105926819

版权

2 篇文章 1 订阅

订阅专栏

在响应式布局中，往往会设置元素的百分比宽度，以适应视口大小的变化。在很多时候我们希望元素的宽高比不变，如果还是简单的将height写成百分比形式，往往渲染出来的结果是无论我们怎么改变窗口大小，height始终是min-height的值（看不见元素也是这个原因）。

我们知道百分比高度和宽度的计算都是基于父元素高度的。我们溯源到最顶的父元素——html，它的宽度是基于视口宽度的，但是它的高度却是基于内容的，这也就是为什么想通过百分比高度来使高度也响应式改变往往不可行的原因。

主要原理是padding的计算是基于父元素宽度的，我们以保持空div的height=width为例，可以像这样写：

        div {
            width: 60%;
            height: 0%;
            padding-top: 60%;
        }

当然如果用这种方式，你还得必须考虑内容所占的高度，所以一般不推荐这样写。

只要原理是在onresize事件中，通过clientWidth属性获取元素的可视宽度，并将其赋值给元素的height。有以下几种写法：

<body class=" container" οnresize="new function() {
    var el=document.getElementById('div');
    el.style.height=el.clientWidth+'px';
 }">

注意： 1. clientWidth是没有单位的，需要加上px；2. 虽然大多数标签都有onresize事件，但是只有写在body的onresize中才有效。

		window.onresize = function () {
            var el = document.getElementById('div');
            el.style.height = el.clientWidth + 'px';
        }

或者是jq的$(window).resize等等。

使用js最为灵活，推荐。

1vh就是视口高度的1%，1vw就是视口宽度的1%，使用这两个单位可以让元素宽高跟随视口大小变化，vh和vw是css3最有用的特性之一。最推荐使用这个方法。

使用Fixed定位或Absolute定位，使元素脱离文档流，这种方法要求元素必须被定位，限制太多，不推荐。

关注

专栏目录