媒体查询某些HTML元素的大小？

Question

是否可以创建根据某些HTML元素（div）的宽度大小应用某些样式的媒体查询？

例如：如果表格网格的宽度小于800像素，请在该表格网格上应用某些样式？

@media all and (max-width: 800px) {
.nano-table-grid {
    flex: none;
    min-width: 75px;
}

}

Answer 1

方法1： 您可以借助 jquery 进行此操作。根据元素 width 将一个 class 添加到div，然后根据添加的类编写CSS

var section = $('.mydiv');
var width = section.width();
if (width < 960)
section.addClass('.mywidth');

方法2：如果要全局应用样式，请使用媒体查询

@media  (max-width: 800px) {
.div {
    color:red;
}
}

Answer 2

当您使用角度4时，可以检查一下。我用过了超级好用。 https://www.npmjs.com/package/ng2-if-media