桌面/手機上無顯示

我不確定這裏有什麼問題，我正在畫空白。桌面/手機上無顯示

我有2張桌子。一個我想要顯示給桌面用戶和一個移動用戶，所以我試圖設置顯示沒有這裏是我的代碼。

.mobile{display: none;}

這是到另一側移動表上的桌面

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

這是用於隱藏在移動桌面表中的代碼的CSS。

這裏是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>

如果這工作，因爲我有嗎？

來源

2017-05-05 DaveYme

http://stackoverflow.com/questions/11996925/display-none-show-on-the-mobile-but-not-on-the-desktop?rq=1 – mxr7350

不，你還沒有設置上寬對於你的手機，你沒有設置相反的風格作爲默認 – Pete

使用最大寬度，而不是最小寬度 –

@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; } 
}

還要確保媒體查詢而來的第一行後...否則會覆蓋它。

來源

2017-05-05 10:13:56 LinkinTED

大手機在css中的寬度爲425 px - 所以你應該也去那裏 – Stender

好點兒@Stender！ – LinkinTED

非常感謝你，這工作。 – DaveYme

在你的風格只要改變，

min-width : 320px

到

max-width : 320px

它的工作。

來源

2017-05-05 10:13:16

桌面/手機上無顯示

回答

相關問題