使用@media screen规则时logo意外消失无效果，请问有什么解决方法？

问题原因 #

• 媒体查询逻辑与需求完全相反：你当前设置的规则是设备宽度在480px到1400px区间时隐藏logo，绝大多数常用的笔记本、平板设备的屏幕宽度都落在这个区间，所以会持续命中隐藏规则，导致logo一直不显示。同时小于480px的极小屏幕反而会显示logo，不符合你「屏幕尺寸过小时隐藏logo」的需求。
• 使用了已废弃的device-width属性：max-device-width/min-device-width匹配的是设备硬件的物理屏幕宽度，和浏览器窗口大小、页面实际视口尺寸无关，已经被CSS标准废弃，适配效果差，应该使用max-width/min-width匹配页面实际渲染的视口宽度。

修复方案 #

按照你的需求，直接修改媒体查询规则即可，示例为设置屏幕宽度小于等于768px时隐藏logo，你可以根据需要调整阈值：

@media screen and (max-width: 768px) {
  .one_image {
    display: none;
  }
}

完整可运行代码 #

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu-bar {
  background-color: #303030;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10%;
}

.one_image {
  display: block;
}

/* 小于等于768px宽度隐藏logo */
@media screen and (max-width: 768px) {
  .one_image {
    display: none;
  }
}
</style>
<div class="menu-bar">
  <a href="https://deltasoft.w3spaces.com/">
    <img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png" alt="站点logo">
  </a>
</div>

内容的提问来源于stack exchange，提问作者JSman225