Html 有人能帮我将媒体查询从最大宽度更改为最小宽度吗?
我在问是否有人可以帮我更改这个中等长度的CSS代码,使其具有最小宽度的媒体查询,而不是最大宽度,当我尝试更改它时,我在整个过程中感到困惑,因为它不是我的,我只是编辑了它。我还附加了与CSS对应的HTML代码 提前谢谢你Html 有人能帮我将媒体查询从最大宽度更改为最小宽度吗?,html,css,media-queries,Html,Css,Media Queries,我在问是否有人可以帮我更改这个中等长度的CSS代码,使其具有最小宽度的媒体查询,而不是最大宽度,当我尝试更改它时,我在整个过程中感到困惑,因为它不是我的,我只是编辑了它。我还附加了与CSS对应的HTML代码 提前谢谢你 #徽标{ 颜色:#e4ec; 字体大小:50px; 线高:100px; 左边距:54px; 字号:700; } 导航ul{ 浮动:对; 右边距:20px; 边缘顶部:20px; } 李国荣{ 显示:内联块; 线高:60px; 利润率:0.5px; } 海军ulli a{ 颜色:
#徽标{
颜色:#e4ec;
字体大小:50px;
线高:100px;
左边距:54px;
字号:700;
}
导航ul{
浮动:对;
右边距:20px;
边缘顶部:20px;
}
李国荣{
显示:内联块;
线高:60px;
利润率:0.5px;
}
海军ulli a{
颜色:#e4ec;
背景色:#4A2285;
边界半径:13px;
字号:17px;
右边距:34px;
左边距:10px;
填充:3px25px;
文本转换:大写;
}
a、 活跃的,
a、 悬停{
背景:#e4ec;
边界半径:13px;
颜色:#4a2285;
过渡:.5s;
}
.checkbtn{
颜色:#e4ec;
浮动:对;
边缘顶部:20px;
右边距:20px;
光标:指针;
显示:无;
}
.汉堡包{
宽度:38px;
高度:28px;
}
#检查{
显示:无;
}
@介质(最大宽度:1100px){
#标志{
字体大小:30px;
线高:100px;
左边距:20px;
字号:700;
}
海军ulli a{
字体大小:16px;
右边距:0px;
}
}
@介质(最大宽度:858px){
#标志{
字体大小:20px;
线高:70px;
左边距:20px;
字号:700;
}
.checkbtn{
显示:块;
}
保险商实验室{
位置:固定;
背景:#201449;
背景图像:url(../images/menu.jpg);
背景位置:左上角;
背景尺寸:封面;
不透明度:1;
宽度:76vw;
身高:100%;
顶部:-20px;
左-100%;
文本对齐:左对齐;
过渡:全部5秒;
边界半径:0px 20px 20px 0px;
z指数:999;
}
李国荣{
显示:块;
利润率最高:45vw;
利润底部:-45vw;
文本对齐:左对齐;
文本转换:小写;
字号:700;
}
海军ulli a{
字体大小:9.5vw;
边界半径:0px;
背景:无;
颜色:#e4ec;
浮动:无;
保证金:0;
}
a、 悬停a:悬停,
a、 活跃的{
边界半径:0;
背景:无;
颜色:#381f84;
过渡:.5s;
}
#检查:检查~ul{
左:0;
}
}
我无法更改第二个媒体查询(因为它必须是最大值,不能是最小值)。但是,如果您想知道在第一个媒体参数为最小值的情况下,您的代码会是什么样子(不要介意屏幕尺寸过大),那么应该这样做:
#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;
}
}
老实说,我不知道你到底想要什么,但我是自己做的。如果有其他请求,请告诉我,我将更正或最终确定。最重要的是,您的决定基于
浮动
规则
切勿使用这些浮动规则
#logo{
字体大小:30px;
线高:100px;
左边距:20px;
字号:700;
}
导航ul{
/*浮动:对*/
右边距:20px;
边缘顶部:20px;
}
李国荣{
显示:内联块;
线高:60px;
利润率:0.5px;
}
海军ulli a{
颜色:#e4ec;
背景色:#4A2285;
边界半径:13px;
字号:17px;
右边距:34px;
左边距:10px;
填充:3px25px;
文本转换:大写;
}
a、 活跃的,
a、 悬停{
背景:#e4ec;
边界半径:13px;
颜色:#4a2285;
过渡:.5s;
}
.checkbtn{
颜色:#e4ec;
浮动:对;
边缘顶部:20px;
右边距:20px;
光标:指针;
显示:无;
}
.汉堡包{
宽度:38px;
高度:28px;
}
#检查{
显示:无;
}
@介质(最小宽度:1100px){
#标志{
颜色:#e4ec;
字体大小:50px;
线高:100px;
左边距:54px;
字号:700;
}
海军ulli a{
字体大小:16px;
右边距:0px;
}
}
@介质(最小宽度:858px){
/*#标志{
字体大小:20px;
线高:70px;
左边距:20px;
字号:700;
}*/
.checkbtn{
显示:块;
}
保险商实验室{
位置:绝对位置;
背景:#201449;
背景图像:url(../images/menu.jpg);
背景位置:左上角;
背景尺寸:封面;
不透明度:1;
/*宽度:76vw*/
高度:100vh;
顶部:-20px;
左-100%;
文本对齐:左对齐;
过渡:全部5秒;
边界半径:0px 20px 20px 0px;
z指数:999;
}
李国荣{
显示:块;
/*利润率最高:45vw;
利润底部:-45vw*/
文本对齐:左对齐;
文本转换:小写;
字号:700;
}
海军ulli a{
/*字体大小:9.5vw*/
边界半径:0px;
背景:无;
颜色:#e4ec;
/*浮动:无*/
保证金:0;
}
a、 悬停a:悬停,
a、 活跃的{
边界半径:0;
背景:无;
颜色:#381f84;
过渡:.5s;
}
#检查:检查~ul{
左:0;
}
}
你好。不清楚你想要什么:)你想要什么结果?兄弟@sergeykuzn