CSS媒体查询不工作为特定的div?

为了确保媒体查询实际上是工作的，问题不是我设置错误的最大宽度，我设置导航栏改变颜色和高度，当最大宽度达到。我的主要目标是让搜索栏进一步向左移动，但这行不通(改变背景颜色是为了视觉目的)。为什么会这样呢?我正试图重新定位搜索栏，因为一旦屏幕变小，它就会出现故障。

nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: rgb(255, 255, 255);
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
@media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}

<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>

<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>

您的媒体查询正常工作:应用了background-color，设置了height。.search的background-color不是很明显，因为搜索输入有一个width: 0px-因此我用50px测试。height的变化是不可见的，因为所有的东西都是白色的-因此我测试了:

nav {
background-color: #ccc;
}

现在你可以看到，在大屏幕上，导航没有height(=auto)，在小屏幕上，40px(使用浏览器开发工具)。

工作的例子:

nav {
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
@media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>

替代的例子:

在媒体查询

中，对整个nav容器使用display: flex，对ul停用transform

nav {
display: flex;
justify-content: space-between;
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
@media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}

nav ul {
transform: none;
}

.search {
background-color: indigo;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>

如果它不是为所有的div的工作，检查如果你忘记把<meta content="width=device-width, initial-scale=1" name="viewport" />在你的<head> </head>标签，你有你的HTML代码。这应该能成功。

相关内容

最新更新

热门标签：