如何在移动窗口或小窗口上隐藏 HTML 中的元素?

Question

我正在建立一个网站，当我在移动设备上打开它或将页面大小调整得太小时，页面顶部的徽标会以看起来很糟糕的方式调整大小。如果我能调整它的大小使其看起来不错，那就太好了，但此时我的时间不多了，只想让它消失。

我尝试过编写JavaScript脚本来使其消失，但失败了。我可以将可见性设置为隐藏，但我无法以响应的方式对页面调整大小执行此操作，也无法检测网页是否太小而无法开始。我尝试使用大小调整的 DOM 事件，但它似乎不起作用。

这是我尝试让HTML使用JS函数：

<a href="website.com" class="header_logo" id="main_logo" onresize="fixBar()">
<img src="image.png">
</a>

这是不起作用的JS函数(位于页面上所有HTML的下方(：

<script type="text/javascript">
function fixBar() {
if (window.innerWidth < 400px) {
document.getElementById("main_logo").style.visibility = "hidden";
} else {
document.getElementById("main_logo").style.visibility = "visible";
}
}
</script>

但正如你所看到的，我仍然不知道如何首先检查窗口是否足够小。

此外，我正在限制下工作，这使得使用jQuery变得非常困难。如果这是我唯一的选择，那么我会使用它，但我真的不想这样做。谢谢你的帮助！

Answer 1

您可以使用 CSS 媒体查询来实现响应能力。

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

<a href="website.com" class="header_logo" id="main_logo">
<img src="https://placeholder.pics/svg/200x50">
<div>Any HTML element</div>
</a>

在这里，当窗口大小小于400px时，将删除带有id="main_logo"的元素。

另一个CSS规则是visibility: hidden;

display: none;和visibility: hidden;是有区别的 在这里查看

Answer 2

您可以使用 CSS 媒体查询来完成此操作：

@media only screen and (max-width: 400px) {
#main_logo {
visibility: hidden;
}
}

Answer 3

好的，如果你可以使用CSS媒体查询来解决这类问题。

@media screen and (max-width: 480px) {
image-container-class {
position: relative;
height: 90px;
width: 150px;
//display: none;
}
}

或者，如果您尝试在小型设备上隐藏徽标，请使用"无显示"。 请参阅UP的注释代码。

Answer 4

我的情况和你几乎一样;如果屏幕宽度小于我指定的宽度，它应该隐藏div。这是我使用的对我有用的jquery代码。

$(window).resize(function() {
if ($(this).width() < 400) {
$('.divIWantedToHide').hide();
} else {
$('.divIWantedToHide').show();
}
});

您可能希望将其与调整大小事件结合使用，您可以检查窗口大小

$(window).resize(function() {
if ($(window).width() < 400) {
alert('Less than 400');
}
else {
alert('More than 400');
}
});

@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多内容，例如：

• 视区的宽度和高度
• 设备的宽度和高度
• 方向(平板电脑/手机是横向模式还是纵向模式？
• 分辨率

例：

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

和

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

在此处结帐 CSS @media规则

你可以用id，classid 用#表示它，类用点表示它，即.