我不确定这里出了什么问题,我正在画一个空白。
我有 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>
这应该像我一样工作吗?
最佳答案
@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; }
}
还要确保媒体查询出现在第一行之后...否则它会覆盖它。
关于html - 在桌面/移动设备上不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43802151/