媒体查询未在网站上应用

Question

我是新手，我可能做错了什么

这是我的媒体查询的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头中添加了视口标记。

修改：

Answer 1

而不是：

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

试试这个：

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

Answer 2

如果在min-width语句末尾删除分号，它应该有用。

@media (min-width: 97rem)

Answer 3

我使用px而不是rem，现在它可以工作了，这可以解释吗？

@media (min-width: 970px) {