媒体查询响应式设计

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

}

来源

2016-11-20 Cakers

你应该在问题本身提供[MCVE。您在代码中提出的问题中没有媒体问题。这个例子看起来并不是很简单，你可以用每个媒体查询中的规则集替换它来显示你想要实现的目标。此外，请使用[用于实时演示的内置功能]（https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 – Quentin

您误解了@ @ media'查询的工作方式。 '@ media'-queries应该覆盖CSS中设置的以前的规则 - 如果你希望他们完成接管，你将不得不在他们应该工作时提供最小宽度和最大宽度，但是，那不是他们的意图。您绝不应该将媒体查询分配到“桌面” - 桌面是您的出发点，您先创建了什么，然后在屏幕上的内容开始重叠时为较小的屏幕创建断点，或者为了良好的布局和用户友好而变得太小。所以你需要从头开始。 – junkfoodjunkie

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

来源

2016-11-20 22:45:09 levinjay

媒体查询响应式设计

回答

相关问题