[英]Could someone help me change the media query from max-width to min-width?
我在问是否有人可以帮助我将这个中等长度的 CSS 代码更改为具有最小宽度媒体查询而不是最大宽度,当我尝试更改它时,我在整个过程中感到困惑,因为它不是我的,我只是编辑了它. 我还附上了对应于 CSS 的 HTML 代码。
先感谢您!
#logo { color: #E4E4EC; font-size: 50px; line-height: 100px; margin-left: 54px; font-weight: 700; } nav ul { float: right; margin-right: 20px; margin-top: 20px; } nav ul li { display: inline-block; line-height: 60px; margin: 0 5px; } nav ul li a { color: #E4E4EC; background-color: #4A2285; border-radius: 13px; font-size: 17px; margin-right: 34px; margin-left: 10px; padding: 3px 25px; text-transform: uppercase; } a.active, a.hover_a:hover { background: #E4E4EC; border-radius: 13px; color: #4a2285; transition: .5s; }.checkbtn { color: #E4E4EC; float: right; margin-top: 20px; margin-right: 20px; cursor: pointer; display: none; }.hamburger { width: 38px; height: 28px; } #check { display: none; } @media (max-width: 1100px) { #logo { font-size: 30px; line-height: 100px; margin-left: 20px; font-weight: 700; } nav ul li a { font-size: 16px; margin-right: 0px; } } @media (max-width: 858px) { #logo { font-size: 20px; line-height: 70px; margin-left: 20px; font-weight: 700; }.checkbtn { display: block; } ul { position: fixed; background: #201449; background-image: url(../images/menu.jpg); background-position: top left; background-size: cover; opacity: 1; width: 76vw; height: 100%; top: -20px; left: -100%; text-align: left; transition: all.5s; border-radius: 0px 20px 20px 0px; z-index: 999; } nav ul li { display: block; margin-top: 45vw; margin-bottom: -45vw; text-align: left; text-transform: lowercase; font-weight: 700; } nav ul li a { font-size: 9.5vw; border-radius: 0px; background: none; color: #e4e4ec; float: none; margin: 0; } a.hover_a:hover, a.active { border-radius: 0; background: none; color: #381f84; transition: .5s; } #check:checked ~ ul { left: 0; } }
<nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"><img src="images/menu.png" class="hamburger" alt="hamburger"> </label> <a href="index.html" id="logo"> LOGO </a> <ul> <li><a class="active buttons hover_a" href=""><b>HOME</b></a></li> <li><a href="" class="buttons hover_a"><b>GALLERY</b></a></li> <li><a href="" class="buttons hover_a"><b>INFORMATION</b></a></li> <li><a href="" class="buttons hover_a"><b>CONTACT</b></a></li> </ul> </nav>
老实说,我不知道你到底想要什么,但我自己做了。 如果还有其他要求,请告诉我,我会更正或最终确定。 最重要的是,您的决定是基于float
规则。
永远不要使用这些float
规则!
#logo { font-size: 30px; line-height: 100px; margin-left: 20px; font-weight: 700; } nav ul { /*float: right;*/ margin-right: 20px; margin-top: 20px; } nav ul li { display: inline-block; line-height: 60px; margin: 0 5px; } nav ul li a { color: #E4E4EC; background-color: #4A2285; border-radius: 13px; font-size: 17px; margin-right: 34px; margin-left: 10px; padding: 3px 25px; text-transform: uppercase; } a.active, a.hover_a:hover { background: #E4E4EC; border-radius: 13px; color: #4a2285; transition: .5s; }.checkbtn { color: #E4E4EC; float: right; margin-top: 20px; margin-right: 20px; cursor: pointer; display: none; }.hamburger { width: 38px; height: 28px; } #check { display: none; } @media (min-width: 1100px) { #logo { color: #E4E4EC; font-size: 50px; line-height: 100px; margin-left: 54px; font-weight: 700; } nav ul li a { font-size: 16px; margin-right: 0px; } } @media (min-width: 858px) { /*#logo { font-size: 20px; line-height: 70px; margin-left: 20px; font-weight: 700; }*/.checkbtn { display: block; } ul { position: absolute; background: #201449; background-image: url(../images/menu.jpg); background-position: top left; background-size: cover; opacity: 1; /*width: 76vw;*/ height: 100vh; top: -20px; left: -100%; text-align: left; transition: all.5s; border-radius: 0px 20px 20px 0px; z-index: 999; } nav ul li { display: block; /*margin-top: 45vw; margin-bottom: -45vw;*/ text-align: left; text-transform: lowercase; font-weight: 700; } nav ul li a { /*font-size: 9.5vw;*/ border-radius: 0px; background: none; color: #e4e4ec; /*float: none;*/ margin: 0; } a.hover_a:hover, a.active { border-radius: 0; background: none; color: #381f84; transition: .5s; } #check:checked ~ ul { left: 0; } }
<nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"><img src="images/menu.png" class="hamburger" alt="hamburger"> </label> <a href="index.html" id="logo"> LOGO </a> <ul> <li><a class="active buttons hover_a" href=""><b>HOME</b></a></li> <li><a href="" class="buttons hover_a"><b>GALLERY</b></a></li> <li><a href="" class="buttons hover_a"><b>INFORMATION</b></a></li> <li><a href="" class="buttons hover_a"><b>CONTACT</b></a></li> </ul> </nav>
我无法更改第二个媒体查询(因为它必须是最大值并且不能是最小值)。 但是,如果您想知道第一个媒体参数为最小值时您的代码会是什么样子(并且不介意屏幕过大),那么应该这样做:
#logo {
color: #E4E4EC;
font-size: 50px;
line-height: 100px;
margin-left: 54px;
font-weight: 700;
}
nav ul {
float: right;
margin-right: 20px;
margin-top: 20px;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin: 0 5px;
}
nav ul li a {
color: #E4E4EC;
background-color: #4A2285;
border-radius: 13px;
font-size: 17px;
margin-right: 34px;
margin-left: 10px;
padding: 3px 25px;
text-transform: uppercase;
}
a.active,
a.hover_a:hover {
background: #E4E4EC;
border-radius: 13px;
color: #4a2285;
transition: .5s;
}
.checkbtn {
color: #E4E4EC;
float: right;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
display: none;
}
.hamburger {
width: 38px;
height: 28px;
}
#check {
display: none;
}
@media (max-width: 1100px) {
#logo {
// Configure your maximum media query here
}
@media (min-width: 859px) {
#logo {
font-size: 30px;
line-height: 100px;
margin-left: 20px;
font-weight: 700;
// Media query that changed
}
nav ul li a {
font-size: 16px;
margin-right: 0px;
}
}
@media (max-width: 858px) {
#logo {
font-size: 20px;
line-height: 70px;
margin-left: 20px;
font-weight: 700;
}
.checkbtn {
display: block;
}
ul {
position: fixed;
background: #201449;
background-image: url(../images/menu.jpg);
background-position: top left;
background-size: cover;
opacity: 1;
width: 76vw;
height: 100%;
top: -20px;
left: -100%;
text-align: left;
transition: all .5s;
border-radius: 0px 20px 20px 0px;
z-index: 999;
}
nav ul li {
display: block;
margin-top: 45vw;
margin-bottom: -45vw;
text-align: left;
text-transform: lowercase;
font-weight: 700;
}
nav ul li a {
font-size: 9.5vw;
border-radius: 0px;
background: none;
color: #e4e4ec;
float: none;
margin: 0;
}
a.hover_a:hover,
a.active {
border-radius: 0;
background: none;
color: #381f84;
transition: .5s;
}
#check:checked ~ ul {
left: 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.