导航自适应 @media screen and (max-width: 1024px)没效果

Question

请大佬帮忙看看 怎么调下 缩小页面导航不能自适应 导致下面右边都是空白
写了@media screen and (max-width: 1024px){}不起作用

header{ background: red; height:100px; box-shadow: 0 2px 2px 2px rgba(0,0,0,.05); width: 100%; z-index: 3;position: fixed; top: 0; left: 0;}
header .warper{position:relative;}

@media screen and (max-width: 1024px){

header{height:66px;}
}

Answer 1

如果你要在移动端使用的话建议在header里加上下面这段

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

@media screen and (max-width: 1024px){}里面的内容是当屏幕宽度小于1024时候页面执行的样式，你的本意是屏幕小了以后让导航高一些是吗