javascript - 具有自动宽度的 div 上的 DOM

Question

假设我创建了一个名为 .main-nav 的 div

然后我将部分标题设置为如下样式:

.main-nav{
    width: auto;
}

在 div 中还有另一个名为 #navbar-brand 的 div

#navbar-brand​{
    padding:15;
}​​

如果我想做一个 DOM，当主导航的宽度超过 768px 时，#navbar-brand 的填充消失了，应该怎么做？？？

Answer 1

这当然可以用 javascript 完成，但使用纯 css 更有效 media queries当视口(viewport)尺寸超过 768px 时。请注意，媒体查询方法假定 .main-nav 宽度是视口(viewport)宽度的 100%，如果 .main-nav 的父容器小于视口(viewport)，则此方法不一定能按预期工作

在默认 #navbar-brand-settings 之后将其插入到您的 css 文件中

@media screen and (min-width: 768px) {
 #navbar-brand​{
     padding: 0;
 }​​
}

此外，您还需要将 meta viewport -tag 添加到您的页面，以使其与视口(viewport)大小一起正常工作，阅读更多 here .