html - 媒体查询未在网站上应用

我对此很陌生，我可能做错了什么

这是我的媒体查询的CSS：

.box h3 {
    position: absolute;
    left: 11%;
    top: 12%;
    font-size: 2rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem #888888;
    z-index: 10;
}

.box p {
    position: absolute;
    left: 11%;
    top: 38%;
    font-size: 0.8rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem black;
    z-index: 10;
}

@media (min-width: 97rem;) {
.box h3 {
    position: absolute;
    left: 11%;
    top: 12%;
    font-size: 6rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem #888888;
    z-index: 10;
}

.box p {
    position: absolute;
    left: 11%;
    top: 38%;
    font-size: 1.8rem;
    color: white;
    text-shadow: 0rem 1rem 1.9rem black;
    z-index: 10;
}
}

我只是在更改字体大小来测试我的代码，但是它不起作用。

我在HTML头中添加了视口标签。

编辑：

最佳答案

代替这个：

@media (min-width: 97rem;) {

尝试这个：

@media all and (min-width: 97rem) {