Html 媒体查询似乎不起作用

我正在尝试将媒体查询添加到我的页面，但它似乎不起作用

我还是个新手，还没有完全掌握媒体查询是如何工作的

以下是媒体查询的代码：

@media screen (max-width:320px){h1{font-size:0.75em;}h1{font- 
size:0.8em;}p{font-size:0.8em;}figcaption{font-size:0.8em;}.img-style{max- 
width:45px;max-height:45px;}#profile-link{max-width:55px;max- 
height:55px;}#navbar{text-align:center;}}

---

这是代码笔：

试着这样写：“@media only screen”和“而不是“@media screen”

您可以使用此代码，只需从“@media screen”中删除“screen”

---

或者您可以更改为“@media only screen and（max width:320px）”。

您缺少了

和

关闭字样

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

  //styles go here

}

---

@仅媒体屏幕和（最大宽度：320px）{wrap styles inside}，在小于320px的宽度上，它应该可以工作。我可以问一下“仅”和“用于”是什么吗？

仅

用于IE的旧版本，但现在不需要。需要

和

单词，因为它是语法的一部分，所以没有它您的媒体查询将无法工作。

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

  //styles go here

}