メディアクエリ、アプリ、モバイル

Question

私はさまざまな画面サイズの異なる要素を表示する必要がある - 、モバイルアプリとデスクトップの」

私が持っている現時点では：

@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、なぜを使用して動作していませんか？

WHY？

min/max-width

幅メディア機能が の描画面の幅を記述する出力装置（例えば、ドキュメントウィンドウの幅、あるいはプリンタにページボックスの 幅など） 。

min/max-device-width

出力デバイスがグリッドデバイスまたはビットマップ デバイスであるかどうかを判断します。デバイスがグリッドベースの場合（フォントが1つしかない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; 
    }  
} 

NOTE違いを参照してください：ここで

は、それはあなたの完全なコードをすべきかですか？ min-width:481pxの場合は480pxになるため、以下の他のクエリと競合する可能性があります。