媒体查询未在现场应用

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) {

媒体查询未在现场应用

media queries are not being applied on site

html

css

media-queries

responsive-design