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

Question

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

尝试过的事情：

更改位置已修复，这导致页脚完全消失
显示：none；
高度和宽度设置为 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>

照片：

Answer 2

我觉得james answer是一个很好的解决方案，但是我也想问一个事情。什么是小屏幕，小于400px宽度的屏幕请忽略这个，但如果是小于400px高度的屏幕则改为：

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

注意：它将是 max-height 而不是 max-width。

Answer 3

Use in head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1" />

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

    }
}

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

Footer won't hide on smaller screens

html

css

media-queries