Question

我有一些元素，并希望在屏幕尺寸小于900px

时将它们全部置于块状态

<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
  <img style="width:30px;height:auto;" src="/escapologinphpto.jpeg">
  <button class="dropbtn" onclick="myFunction()">Dropdown
          <!-- <i class="fa fa-caret-down"></i> -->
        </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

这是到现在为止的工作环节 https://jsfiddle.net/153qkyoh/

Answer 1

您可以使用CSS媒体查询来实现此目的。但是，您需要知道某些设备和屏幕类型的各种断点。我们有992px作为屏幕断点，最接近900px。

@media screen and ( max-width: 992px) {
    a {
        display: block;
    }
}

或者如果要继承链接元素显示属性，可以添加 - ！important关键字以忽略连接到它的所有继承样式。

@media screen and ( max-width: 992px) {
    a {
        display: block !important;
    }
}

将内容放入块中

1 个答案: