当屏幕变小时，如何让一个元素消失？

Question

我正在学习 "media queries" 以及如何在屏幕宽度小于（例如）680 像素时更改某些内容的颜色：

@media screen and (max-width: 680px) {
    header {
         background:blue;
    }
}

我的header右上角有一段代码：

        <li>
            <a href="#">
                Login
            </a>
        </li>
        <li>
            <a href="#">
                Sign in
            </a>
        </li>

如何使用媒体查询来表示“当屏幕变得小于 680 像素时，我不想再显示 Sign in link。

换句话说，当屏幕宽度小于 680 像素时，我只想保留 Login 按钮。

Answer 1

如果您无法更改标记，则需要像这样定位第二个 child。

@media screen and (max-width: 680px) {
  header {
    background: blue;
  }
  li:nth-child(2) {
    display: none;
  }
}

<li>
  <a href="#"> Login </a>
</li>
<li>
  <a href="#"> Sign in </a>
</li>

如果您可以更改标记，最佳做法是分配一个 class-name。

@media screen and (max-width: 680px) {
  header {
    background: blue;
  }
  .signin {
    display: none;
  }
}

<li class="login">
  <a href="#"> Login </a>
</li>
<li class="signin">
  <a href="#"> Sign in </a>
</li>

Answer 2

您可以在媒体查询 max-width: 680px.

中使用 display: none; 简单地隐藏登录 link

<li class="login-link">
    <a href="#">
        Login
    </a>
</li>
<li class="signin-link">
    <a href="#">
        Sign in
    </a>
</li>

<style>
@media screen and (max-width: 680px) {
    .signin-link {
        display: none;
    }
}
</style>

当屏幕变小时，如何让一个元素消失？

How to make an element go away when the screen becomes smaller?

html

css

media-queries