没有在现场应用媒体查询。

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头部添加了viewport标签。

编辑：

​

Answer 1

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

@media (min-width: 970px) {

Answer 2

而不是这样：

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

试试这个：

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

Answer 3

如果您删除min-width语句末尾的分号，它就会工作。

@media (min-width: 97rem)