对于1920 * 1080，不显示"Navigation"（导航）菜单项
我对除〉1280之外的所有器件宽度设置display = none
`@media only screen and (min-width: 100px) and (max-width: 260px) {
header .navigation {
display: none;
}
@media only screen and (min-width: 260px) and (max-width: 350px) {
header .navigation {
display: none;
}
@media only screen and (min-width: 370px) and (max-width: 500px) {
header .navigation {
display: none;
}
@media only screen and (min-width: 500px) and (max-width: 1280px) {
header .navigation {
display: none;
}
@media only screen and (min-width: 350px) and (max-width: 370px) {
header .navigation {
display: none;
}
@media screen and (min-width: 1280px){
header .navigation{
height:3em;
position: relative;
background: dark orange ;
width:98em;
top:50;
left:-12em;
font-size:30px;
font-color: dark orange;
font-family: Meow Script;
padding:20px;
}
header .navigation .navigation-items a{
font-family: Meow Script;
position: relative;
background: dark red;
color: white;
font-size: 3em;
font-weight: 500;
width:100px;
font-size:20px;
text-decoration: none;
margin-left: 15px;
transition: 0.3s ease;
left :15em;
padding: 15px 40px;
border-radius:150px;
font-family: Meow Script;
}
header .navigation .navigation-items a span{
border-radius:50px;
width:100px;
font-family: Meow Script;
font-size: 1.2em;
}
header .navigation .navigation-items a:before{
content: '';
position: absolute;
font-family: Meow Script;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before{
width: 100%;
}
}`
if I use the same in a different CSS file without media queries I am able to see the navigation menus in my Laptop 1920* 1080 resolution.Navigation menus showing when CSS used without media Query.Navigation menu not showing when CSS used with media Query for 1920*1080 Laptop
我试着写媒体查询，使导航菜单只显示〉1280像素的宽度，而不是像手机和笔记本电脑的小屏幕宽度。
我为所有宽度〈1280px的设备设置了display = none。
但导航菜单未显示为1920 * 1080
孔（宽度〉1280px）
2条答案
按热度按时间8tntrjer1#
最后一个
mediaQuery上缺少一个only。应该是
gzszwxb42#
开始修复CSS中的一些错误，如果你不知道该如何修复，请尝试使用在线验证器，如下所示：
https://jigsaw.w3.org/css-validator/#validate_by_input
也许问题不在于媒体查询，而在于其他规则生成的输出。
媒体查询提示：把你所有的CSS放在媒体查询之外，并且只使用它们来改变你想要的特性。2注意媒体查询的顺序，有时候一个语句会覆盖前面的语句。
试试这个CSS：
工作代码：https://codepen.io/Davevvave/pen/poZrwZE