html - 在桌面/移动设备上不显示

Question

我不确定这里出了什么问题，我正在画一个空白。

我有 2 张 table 。一个我想显示给桌面用户，一个显示给移动用户，所以我试图设置一个显示，这里没有我的代码。

.mobile{display: none;}

这是在桌面上放置移动表格的 css

@media only screen and (min-width : 320px) {
.desktop{display: none;}
.mobile{ display:block;}}

这是在移动设备上隐藏桌面表格的代码。

这是 html

<table class="desktop">
 <tr>
  <td><img src="images/aqu-landing_icon-win.png"></td>
  <td><img src="images/aqu-landing_icon-mac.png"></td>
  <td><img src="images/aqu-landing_icon-and.png"></td>
  <td><img src="images/aqu-landing_icon-ios.png"></td>
 </tr>
 <tr>
  <td>Windows PC</td>
  <td>Apple PC</td>
  <td>Android Device</td>
  <td>iOS Device</td>
 </tr>
</table>
<table class="mobile">
 <tr>
  <td><img src="images/aqu-landing_icon-and2.png"></td>
  <td><img src="images/aqu-landing_icon-ios2.png"></td>
 </tr>
 <tr>
  <td>Android Device</td>
  <td>iOS Device</td>
 </tr>
</table>

这应该像我一样工作吗？

Answer 1

@media only screen and (min-width : 320px)

表示:适用于配备屏幕且最小宽度为 320 像素的设备。所以这将影响所有宽度超过 320 像素的内容。

要解决手机问题，您应该使用max-width

.mobile { display: none; }

@media only screen and (max-width : 320px) {
   .desktop{ display: none; }
   .mobile{ display:block; }
}

还要确保媒体查询出现在第一行之后...否则它会覆盖它。