Question

我是CSS的新手。我编写了一个非常简单的网站，我有一些页脚的CSS代码。

.footer {
    background: #968065;
    width: 100%;
    height: 10vw;
    color: #EEE8C6;
    text-align: center;
    position: absolute;
    top: 100%;
}

@media screen and (max-width: 600px) {
    .footer {
        visibility: hidden;
    }
}

我希望媒体屏幕隐藏手机上的页脚，但这并不起作用。我测试了代码没有其他所有东西，它的工作原理。您认为这个问题是什么？感谢。

Answer 1

首先将以下元标记添加到HTML文件中。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用display: none是一种比visibility: hidden更好的做法。前者不会在穹顶中分配任何空间，但后者只会看不见。

@media all and (max-width: 600px){
  .footer{
    display: none;
  }
}

CSS媒体屏幕无法正常工作？

1 个答案: