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

Question

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

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

.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 像素的设备。所以这将影响所有超过 320px 的宽度。

要给手机地址，你应该使用max-width

.mobile { display: none; }

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

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

Answer 2

只要改变你的风格，

min-width : 320px

进入

max-width : 320px

它正在工作。