在手机屏幕上隐藏菜单列表

Question

隐藏我在移动屏幕上使用的菜单栏：

@media (min-width:320px){
    menu{display:none;}
}

@media (min-width:481px){
    menu{display:none;} 
}

但这也导致禁用桌面上的菜单。
这是网站whiskersjersey.co.uk

Answer 1

如果您只希望菜单栏隐藏在移动屏幕上，则应使用@media (max-width:481px) {menu{display:none;}}而不是min-width

Answer 2

您应该使用：

@media (max-width:481px){
    menu{display:none;}
}

而不是min-width 。 我也建议使用选择（ .menu或#menu ），而不是定位方式直接DOM元素，因为这个元素本身就可以在网站的其他部分使用，这会给你你渴望的风格有什么更好的精度。