CSS将div从桌面交换到移动答案

【问题标题】：CSS to swap div from desktop to mobileCSS将div从桌面交换到移动
【发布时间】：2022-02-13 17:07:59
【问题描述】：

我有两个用于桌面和移动设备的 div，但是当我使用检查工具为移动设备选择不同的尺寸时，移动设备的 div 不显示。

.outdoor { 
  display:block; 
}

.outdoor-m { 
  display:none; 
}

@media screen and (max-width:600px) {
  .outdoor { 
    display:none!important; 
  }
 
  .outdoor-m { 
    display:block!important; 
  }
}

<div class="outdoor">
  <img src="outdoor.jpg">
</div>

<div class="outdoor-m">
  <img src="outdoor-600.jpg">
</div>

非常感谢您的帮助

【问题讨论】：

它工作正常并且在检查开发工具中可见。这里有什么问题？
您使用的是viewport meta tag 吗？没有它，移动浏览器会假定该页面未针对移动设备进行优化，并会模拟更宽的视口。
非常感谢。是关键！我添加后，现在它可以工作了！非常感谢您的帮助！

标签： css media-queries

【解决方案1】：

以下示例显示了<div> 元素与.outdoor 类样式应用于桌面和平板设备；这个<div> 元素不会显示在移动设备上。具有.outdoor-m 类样式的<div> 元素在移动设备上显示；这个<div> 元素不会显示在桌面和平板设备上。对于移动兼容设备，最大屏幕宽度应为768px 以编写媒体查询。 为了测试应用，您可以在全屏预览中放大或缩小页面宽度。

.outdoor{
  display: block; 
}

.outdoor-m { 
  display: none; 
}

@media screen and (max-width:768px) {
  .outdoor { 
    display: none !important; 
  }
  
  .outdoor-m { 
    display: block !important; 
  }
}

<h1 class="outdoor">Active: Desktop</h1>
<h1 class="outdoor-m">Active: Mobile</h1>

<!-- This <div> is displayed on desktop devices and tablets. -->
<div class="outdoor">
  <img src="https://via.placeholder.com/500">
</div>

<!-- On mobile devices this <div> is displayed. -->
<div class="outdoor-m">
  <img src="https://via.placeholder.com/250">
</div>

【讨论】：

出了什么问题？ !important 被困在 none 和 block 上？