个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我被这个错误困住了，我尝试使用媒体查询创建的响应式导航栏根本没有响应，因为无论我尝试什么，@medias 似乎都没有效果。我已经尝试了所有可能的媒体查询格式，但我得到的只是 react 迟钝；请帮助我克服它。
我被这个错误困住了，我尝试使用媒体查询创建的响应式导航栏根本没有响应，因为无论我尝试什么，@medias 似乎都没有效果。我已经尝试了所有可能的媒体查询格式，但我得到的只是 react 迟钝；请帮我克服它。
<!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" alt="logo of library club">
</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>最佳答案
看起来您正在尝试使用标准 CSS 中常见的 SASS/LESS 或 CSS-in-JS 功能。
当您使用标准 CSS 时，您的媒体查询必须位于顶层并包含一个由选择器和定义组成的有效 CSS block 。
您可以在此处阅读更多信息 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 */
}
}
你也可以通过 linters 来测试你的 CSS，一个在线例子是 http://csslint.net
关于html - @media 查询没有在我的响应式导航栏设计中运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53894634/
29
4
0
我正在使用 Gunicorn 为 Django 应用程序提供服务，它工作正常，直到我将其超时时间从 30 秒更改为 900000 秒，我不得不这样做，因为我有一个用例需要上传和处理一个巨大的文件(过程
我有一个带有非常基本的管道的Jenkinsfile，它可以旋转docker容器: pipeline { agent { dockerfile { args '-u root' } } stag
在学习 MEAN 堆栈的过程中，我遇到了一个问题。每当我尝试使用 Passport 验证方法时，它都不会返回任何响应。我总是收到“localhost没有发送任何数据。ERR_EMPTY_RESPONS
在当今的大多数企业堆栈中，数据库是我们存储所有秘密的地方。它是安全屋，是待命室，也是用于存储可能非常私密或极具价值的物品的集散地。对于依赖它的数据库管理员、程序员和DevOps团队来说，保护它免受所
是否可以创建像图片上那样的边框？只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。 假设这是一个 ul
我是一名优秀的程序员,十分优秀！