html - 媒体查询响应式设计

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：https://jsfiddle.net/ma28j5kd/
（我知道小提琴并不漂亮，所以我先向您道歉）

HTML：

<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：

片剂：

@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) {
	.image-display { display: block; }
}

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