媒体查询无法使用css网格布局

这是我的HTML和CSS文件

.container{
显示：网格；
网格间距：5px；
网格模板区域：
“标题”
“节”
“A-1”
“A-2”
“页脚”；
}
@媒体屏幕和屏幕（最小宽度：700px）{
.集装箱{
网格模板区域：
“标题”
“第1节第2节”
“页脚”；
}
}
/*所有网格项*/
.容器>*{
背景色：中绿色；
字号：80px；
}
标题{
网格区域：标题；
}
旁白：第n种类型（1）{
网格面积：1-1；
}
部分{
网格区域：截面；
}
旁白：第n种类型（2）{
网格面积：1-2；
}
页脚{
网格区域：页脚；
}

标题
旁白1
部分
旁白2
页脚

如果媒体查询不起作用，请将此元标记添加到HTML的头标记中

<meta name="viewport" content="width=device-width,initial-scale=1">

代码很好，可以正常工作，也许热重新加载是一个解决方案。

在这里似乎可以正常工作