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

【问题标题】：Footer won't hide on smaller screens页脚不会隐藏在较小的屏幕上
【发布时间】：2022-02-15 18:52:04
【问题描述】：

我正在为一个项目的 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>

我认为这是我想念的非常简单的东西，但我是新手，所以想请教一下。

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

【问题讨论】：

该媒体查询是为您的页脚设置样式的最后一个实例吗？
原来是这样，我刚才把它移到了开头，但是当我检查了小屏幕尺寸时没有区别。
从您的 css 代码中删除唯一的单词。 @media screen and (max-width:400px) { footer { display:none; } }
@Mehrwarz，加不加only没有区别
我在 Firefox 中使用 Edge 浏览器。删除唯一使其工作。

标签： html css media-queries

【解决方案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>

照片：

【讨论】：

出于隐私考虑，我在发布之前删除了我的链接和全名，但它们已正确集成。如果我不清楚，“我链接的内容”和“我的名字”是实际存在的内容的占位符，道歉。

【解决方案2】：

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;

    }
}

【讨论】：

这与我的回答有何不同？

【解决方案3】：

我认为詹姆斯的回答是一个很好的解决方案，但我也想问一件事。什么是小屏幕，小于400px宽度的屏幕那么请忽略这个，但是如果是小于400px高度的屏幕则改为：

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

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

【讨论】：