メディアクエリー応答デザイン

Question

@media only screen and (min-width: 600px) { 
 

 
nav ul{ 
 
    transform: translateY(0); 
 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
    transition: all .5s; 
 
    } 
 
nav li{ 
 
    flex: none; 
 
    width: 100%; 
 
    border-bottom: solid 1px #777; 
 
    } 
 
    nav input[type="checkbox"]:checked + ul{ 
 
    transform: translateY(-100%); 
 
    width: 100%; 
 
    background: #999; 
 
    transition: all .5s; 
 
    } 
 
    nav label{display: block;} 
 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
    background: #777; 
 
    color: #fff; 
 
    } 
 

 
    #css-toggle-menu{ 
 
    float:right; 
 
    margin: 10px; 
 
    } 
 

 
} 
 

 

 

 

 
/*Desktop*/ 
 

 

 
@media (min-width: 961px) and (max-width: 2000px) { 
 
nav{ 
 

 
float:left; 
 
color:white; 
 

 

 

 
} 
 

 

 

 
nav ul li.active a { 
 
background-color: none; 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 
    a:hover { 
 

 
    color:black; 
 
    background-color:#00E3FF; 
 

 
    } 
 

 

 

 
nav ul li a:visited { 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
}

<header> 
 
    <nav> 
 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
 
    <ul class="main"> 
 
      <li><a class="space" href="">Home</a></li> 
 
      <li><a class="space" href="">Programs</a></li> 
 
      <li><a class="space" href="">Assignments</a></li> 
 
      <li><a class="space" href="">Enroll</a></li> 
 
      <li><a class="space" href="">Contact</a></li> 
 

 
    </ul> 
 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
 
    </nav> 
 
</header>

デスクトップに転送します。しかし、私は、タブレットモードからデスクトップに切り替えるときに、携帯電話やタブレットの画面からナビゲーションバーをデスクトップに移動するという問題にぶつかっています。デスクトップ上では、ページの上部に水平方向のナビゲーションが必要です。私はそれをタブレットのナビゲーションバーに入れるためにどんなCSSも置かなかったので、デスクトップでこれをどのように上書きするか分からない。私は実際にこのメディアクエリの問題を理解する上でいくつかの助けを使用することができます。ありがとうございました！ここで

はJsFiddleです：

<header> 
    <nav> 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
    <ul class="main"> 
      <li><a class="space" href="">Home</a></li> 
      <li><a class="space" href="">Programs</a></li> 
      <li><a class="space" href="">Assignments</a></li> 
      <li><a class="space" href="">Enroll</a></li> 
      <li><a class="space" href="">Contact</a></li> 

    </ul> 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
    </nav> 
</header> 

CSS：

タブレット：

https://jsfiddle.net/ma28j5kd/

HTML（私はバイオリンはかなりので、私は事前に謝罪ではありません知っています）

@media only screen and (min-width: 600px) { 

nav ul{ 
    transform: translateY(0); 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
    transition: all .5s; 
    } 
nav li{ 
    flex: none; 
    width: 100%; 
    border-bottom: solid 1px #777; 
    } 
    nav input[type="checkbox"]:checked + ul{ 
    transform: translateY(-100%); 
    width: 100%; 
    background: #999; 
    transition: all .5s; 
    } 
    nav label{display: block;} 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
    background: #777; 
    color: #fff; 
    } 

    #css-toggle-menu{ 
    float:right; 
    margin: 10px; 
    } 

} 

デスクトップ：

@media (min-width: 961px) and (max-width: 2000px) { 
nav{ 

float:left; 
color:white; 



} 



nav ul li.active a { 
background-color: none; 
    color: white; 
    text-decoration:none; 
} 
    a:hover { 

    color:black; 
    background-color:#00E3FF; 

    } 



nav ul li a:visited { 
color:black; 
text-decoration:none; 
} 

} 

Answer 1

私がしたことは、特定のメディアクエリでスタイルを取り戻すことです。

/* smartphones, iPhone, portrait 480x320 phones */ 
 
@media (min-width:321px) and (max-width: 480px) { 
 
\t .image-display { display: block; } 
 
} 
 

 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
 
@media (min-width:481px) and (max-width: 640px) { 
 
\t .image-display { display: none; } 
 
}