Question

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

我有两张桌子。一个我希望显示给桌面用户，一个显示给移动用户，所以我试图设置一个显示器，这里没有我的代码。

.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)

表示：适用于屏幕和最小宽度为320px的设备。所以这将影响所有宽度超过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

它在工作。

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

2 个答案: