Question

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

我将节标题设置如下：

.main-nav{
    width: auto;
}

在div中还有一个名为＃navbar-brand

的div

#navbar-brand{
    padding:15;
}

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

Answer 1

您可以使用媒体CSS查询来实现此目的，如下所示：

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

Answer 2

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

在默认的＃navbar-brand-settings

之后将其插入到您的css文件中

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

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

Answer 3

试试这个，但总是会创建一个关于你的代码所做的事情或在这里发布你的整个代码的小提琴。

CSS

    .main-nav{
      width:auto;
      background:#111;
    }

#navbar-brand{
    padding:15px;
    background:#f22;
}

JS

$(document).ready(function(){
    $(window).resize(function(){
    var wdth = $(".main-nav").width();
  if(wdth >= "768"){
    $("#navbar-brand").css('padding','0');
  }
  else{
    $("#navbar-brand").css('padding','15px');
  }
});
});

Answer 4

.main-nav 是一个块元素，因此在整个屏幕上占据整个宽度。添加 width：auto 可能在那里什么也没做。

其子＃navbar-brand 也是一个块元素，其填充为15 （您忘记了单位）。

你想做一个DOM （它含糊不清，让声明更清晰！）

但是如果尝试使用js进行DOM操作，

你必须将处理内容附加到诸如调整大小（可能大多数移动浏览器没有）等事件上
或者使用 setInterval 进行检查并在完成后取消它或者只需调用一个函数检查DOM何时准备好或页面已加载

或者

超级简单

如果您只是更改css属性，请使用媒体查询（请参阅 MDN ）。

div上的DOM具有自动宽度

4 个答案: