Question

我正致力于在tti-fl.com网站中尽量减少多列的高度。这些列在媒体查询中具有锁定高度，当我更改高度时，它们会失去移动响应。

列的布局中有多余的空白区域，我想将其固定到桌面和笔记本电脑（10px和@media 992px分别为@media 1022 px），然后300px 1}}适用于平板电脑和智能手机（分别为@media 481px和@media 768px）。

我听说过使用jQuery，我想知道如何使用这种编码语言使列更小而不是更大。我正在尝试编辑的元素包括：

.categories-wrapper .content-block /*for 768px and up to 992px*/{
    text-align: center;
}
.home .categories-wrapper .content-block {
    text-align: center;
}

列以<div class="col-xs-12 col-sm-6 col-md-3">开头。还有其他列，但它们是我不知道如何编辑的插件。

Answer 1

如果我理解正确，你希望在某些断点处控制div的高度。这可以使用match media轻松完成。

if (window.matchMedia("(min-width: 991px)").matches) {
    //jquery selector
    $('.categories-wrapper .content-block').css('height', 50 + 'px');
}

或者您想要的任何其他选项。我会把它放在一个resize函数中，这样浏览器在缩小或扩展时会做出相应的反应。否则，每个浏览器负载都会有一个固定的高度。

当然，解决问题的方法可能会容易得多。你能简单地删除div的固定高度吗？如果您需要将div设置为具有不同内容量的相同高度，可以查看flexbox吗？

如何在媒体查询中使用jQuery最小化列的高度？

1 个答案: