媒體查詢顯示在桌面上，iPad的不同元素，移動

Question

我需要顯示在不同屏幕尺寸不同的元素 - 手機，iPad和桌面」

此刻我：

@media only screen and (min-width: 480px) { 
    .showMobile { 
    display: none; 
    position: relative; 
    width: 100%; 
    } 
} 


@media only screen and (max-width: 480px) { 

    .hideMobile { 
    display: none; 
    } 

} 

，但我需要showTablet的肖像工作 - 橫向屏幕尺寸

和

一個showDekstop顯示桌面屏幕尺寸的桌面視圖。

但我似乎無法得到這個工作......任何人都可以幫忙嗎？

@media only screen and (min-device-width : 768px) and (max-device-width : 
1024px) { 
    .showTablet { 
    display: block; 
    visibility: visible; 
    position: relative; 
    width: 100%; 
    } 
} 
@media only screen and (min-width: 1024px)and (max-device-width : 2048px) { 
    .showDesktop { 
    display: block; 
    visibility: visible; 
    position: relative; 
    width: 100%; 
    } 
} 

這是我有，但它不工作

Answer 1

Dont't使用device，爲什麼呢？

爲什麼？

min/max-width

寬度媒體特徵描述的 的呈現表面的寬度的輸出設備（如文檔窗口的寬度，或在打印機上的 寬度的頁框的） 。

min/max-device-width

確定輸出設備是電網設備或位圖 設備。如果設備是基於網格的（例如TTY終端或僅有一種字體的電話顯示屏），則值爲1.否則爲 零。

這是應該的完整代碼：

@media only screen and (min-width: 1025px) and (max-width: 2048px) { 
    .showDesktop { 
    display: block; 
    visibility: visible; 
    position: relative; 
    width: 100%; 
    } 
} 
@media only screen and (min-width: 769px) and (max-width: 1024px) { 
    .showTablet { 
    display: block; 
    visibility: visible; 
    position: relative; 
    width: 100%; 
    } 
}  
@media only screen and (min-width: 481px) { 
    .showMobile { 
    display: none; 
    position: relative; 
    width: 100%; 
    } 
}   
@media only screen and (max-width: 480px) {  
    .hideMobile { 
    display: none; 
    }  
} 

注意看到區別？ min-width:481px，因爲如果它480px會與下面的其他查詢發生衝突。