Html 未调用媒体查询

有人知道为什么这个媒体查询不起作用吗？header-x1的第一部分工作正常。但是我想在最大宽度为768px时更改字体大小。但是当我在这里运行我的代码时，什么都没有发生。有人知道为什么吗

<p class="header-xl">
   This is a test
</p

.header-xl {
    font-weight: 900;
    font-size: 5em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    padding-top: 160px;
    }

@media(max-width:768px) {
    header-xl  {
        font-size: 8px;
    }

这是一个测试
你错过了一次机会。对于媒体查询中的类，而不是标头xl add.header xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }

你错过了一次机会。对于媒体查询中的类，而不是标头xl add.header xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }

从外观上看，您需要
.header xl
而不是
header xl
在媒体查询中
从外观上看，您需要
.header xl
而不是
header xl
在媒体查询中
将
header xl
更改为.header xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }
}

将
标题xl
更改为。标题xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }
}