mobile - メディアクエリの表示/非表示を分割

Question

モバイル幅の場合にのみ、特定のdivを表示するためにどのコードを使用できますか？

画面の上部に100％幅のフルディビジョンがあり、デバイスがモバイル幅として指定されている場合にのみ表示したいと考えています。

Answer 1

「モバイル幅」とはどういう意味かわかりません。ただし、いずれの場合も、CSS @mediaを使用して画面幅ベースで要素を非表示にすることができます。いくつかの例を参照してください。

<div id="my-content"></div>

...と：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* hide it elsewhere */
}

一部の真のモバイル検出は、一種のハードプログラミングであり、かなり困難です。最終的には、http：//detectmobilebrowsers.com/または他の同様のソースを参照してください。

Answer 2

デバイスのビューポートにアクセスしたいようです。これを行うには、このメタタグをヘッダーに挿入します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 3

 Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  #my-content{
   width:100%;
 }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
  #my-content{
   width:100%;
 }
 }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
display: none;
 }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
// Havent code only get for more informations 
 }