我目前正在制作一个菜单侧边栏，当屏幕宽度超过 568px(大到足以同时显示内容和菜单)时应该始终打开，但当屏幕宽度低于该宽度时可以打开和关闭.
代码:
@media(min-width:568px){
.open-slide {display:none}
.btn-close {display:none}
.side-nav {width:250px;margin-top:80px;}
}
.open-slide = 打开侧边栏的按钮
.btn-close = 关闭侧边栏的按钮(显然)
.side-nav{width:250px;margin-top:80px;} 更改侧边栏的标准宽度，使其可见，并将其边框向下移动一点，因为“关闭”按钮不再存在。
当我用浏览器对此进行测试时，一切正常。但是当我用手机测试它时，侧边栏就在那里，就好像屏幕和整个电脑屏幕一样大。那里有什么问题？
长话短说:
该代码在我的电脑上有效，但在我的手机上无效，为什么？
最佳答案
可能您在 HTML header 中缺少视口(viewport):
<meta name="viewport" content="width=device-width,initial-scale=1.0">
关于html - CSS @media(min-width) 在手机上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50970727/