@media 查询未在我的响应式导航栏设计中运行？
Posted
技术标签:
【中文标题】@media 查询未在我的响应式导航栏设计中运行？【英文标题】：@media queries not running in my responsive nav bar design? 【发布时间】：2019-05-22 12:10:41 【问题描述】：我被这个错误困住了，我尝试使用媒体查询制作的响应式导航栏根本没有响应，因为@medias 似乎无论我尝试什么都没有效果。 我已经尝试了所有可能的媒体查询格式，但我得到的只是无响应；请帮我克服它。
我被这个错误困住了，我尝试使用媒体查询制作的响应式导航栏根本没有响应，因为@medias 似乎无论我尝试什么都没有效果。 我已经尝试了所有可能的媒体查询格式，但我得到的只是无响应；请帮我克服它。
<!DOCTYPE html>
<html>
<head>
<title>Product Page</title>
<style>
*
padding: 0;
margin: 0;
box-sizing: border-box;
body
background-color: antiquewhite;
font-family: 'Lato', sans-serif;
#wrapper
position: relative;
li
list-style: none;
a
color: #000;
text-decoration: none;
header
width: 10s0vw;
position: fixed;
top: 0;
min-height: 75px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: aquamarine;
@media screen and(max-width: 600px)
flex-wrap: wrap;
.logo
border: 1px solid black;
width: 60vw;
@media screen and(max-width: 650px)
margin-top: 15px;
width: 100%;
posistion: relative;
#header-img
border: 1px solid black;
width: 100%;
max-width: 80px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
@media screen and(max-width: 650px)
margin: 0 auto;
#nav-bar
border: 1px solid black;
font-weight: 400;
@media screen and(max-width: 650px)
margin-top: 10px;
width: 100%;
padding: 0 50px;
li
padding-bottom: 0px;
ul
border: 1px solid black;
width: 35vw;
display: flex;
justify-content: space-around;
@media screen and(max-width: 650px)
flex-direction: column;
</style>
</head>
<body>
<div id="wrapper">
<header id="header">
<div class="logo">
<img src="http://www.pngmart.com/files/1/Civil-Engineering-Book-PNG.png" id="header-img" >
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#">Features</a></li>
<li class="nav-link"><a href="#">Our Partners</a></li>
<li class="nav-link"><a href="#">Pricing</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：看起来您正在尝试使用标准 CSS 中常见的 SASS/LESS 或 CSS-in-JS 功能。
当您使用标准 CSS 时，您的媒体查询必须位于顶层并包含由选择器和定义组成的有效 CSS 块。
您可以在这里阅读更多内容https://developer.mozilla.org/en-US/docs/Web/CSS/@media
@media (max-width: 300px)
#navbar
color: pink; /* valid */
#navbar
@media (max-width: 300px)
color: pink; /* invalid, media nested inside a selector */
你也可以用 linter 来测试你的 CSS，网上的一个例子是http://csslint.net
【讨论】：
以上是关于@media 查询未在我的响应式导航栏设计中运行？的主要内容，如果未能解决你的问题，请参考以下文章