Question

＆＃13;

@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;   
}

}

＆＃13;

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

＆＃13;

通过媒体查询，我认为当您在平板电脑和桌面设置它们时，一旦达到这些参数，当您切换到桌面时平板电脑等其他布局就会消失。但是，我遇到了一个问题，当我从平板电脑模式切换到桌面时，我的手机和平板电脑屏幕上的导航栏会被带到我的桌面。在我的桌面上，我只想在页面顶部使用水平导航。我没有把任何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

我所做的就是在特定的媒体查询中获得风格。

＆＃13;

/* 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; }
}

＆＃13;

媒体查询响应式设计

1 个答案: