媒体查询显示在桌面上，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会与下面的其他查询发生冲突。