html - 页脚不会在较小的屏幕上隐藏

Question

我正在为一个元素开发 Javascript 技术文档页面，但我使用媒体查询的页脚并没有像我希望的那样隐藏在小屏幕上。

尝试过的事情:

• 更改位置固定，这导致页脚完全消失
• 显示:无；
• 高度和宽度设置为 0px；

这是我的 SASS 代码，它已正确链接到 html 页面和 CSS。

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

@media only screen and (max-width:400px) {

    footer {
        display:none;

    }
}

<footer>
        Designed and Coded by: 
        <a href="what i linked" target="_blank">my name</a>
    </footer>

我认为这是我所缺少的非常简单的东西，但我是新手，所以我想寻求帮助。

非常感谢您，感谢您的宝贵时间。

Answer 1

添加<meta content="width=device-width, initial-scale=1" name="viewport" />在它为你工作之前。

    footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

@media only screen and (max-width:400px) {
    footer {
        display:none;

    }
}

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

    <footer>
        Designed and Coded by: 
        <a href="what i linked" target="_blank">my name</a>
    </footer>

照片: