我正在建立一个网站，当我在移动设备上打开网站或将页面尺寸调整得过小时，页面顶部的徽标会以看起来很糟糕的方式调整自身尺寸。如果可以调整它的大小以使其看起来不错，那就太好了，但是在这一点上，我已经没时间了，只是想让它消失。
我曾尝试并未能编写JavaScript脚本以使其消失。我可以将可见性设置为“隐藏”，但是我无法通过响应方式来调整页面的大小，也无法检测网页是否太小而无法开始。我试图使用onresize 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非常困难。如果那是我唯一的选择，那么我将使用它，但我真的不愿意。感谢您的帮助！
您可以使用CSS Media Query进行响应。
@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;检查了这里
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句