javascript - 添加css时媒体查询不起作用

Question

添加 CSS 时，此处的媒体查询不起作用。如果我删除了 CSS，那么媒体查询就可以正常工作。在这里，我评论了 CSS 取消注释并检查。这里可能是什么问题任何人都可以建议我的方向。

/*.circle-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.circle-icons svg {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.cr-info {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: flex;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    width: 100%;
    height: 465px;
    padding: 50px;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
    border-radius: 20px;
    background: #fff;
}
.cr-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
[class^="cr-box"] {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 90%;
    z-index: 1;
}
[class^="cr-box"] div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.cr-text h2 {
    font-size: 42px;
    font-weight: 800;
    font-family: cursive;
}
.cr-image img {
    width: auto;
    height: 300px;
}

.cr-icon:hover {
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}
image.cr-icon {
    display: block;
    pointer-events: none;
}

.anim {
    fill:#000;
    transform: scale(1.1,1.1);
}
.cr-icon {
    cursor: pointer;
    -webkit-transition: 1s all;
    -o-transition: 1s all;
    transition: 1s all;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}
div[class*="cr-box"] {
    visibility: hidden;
}

.cr-wrap .active  {
    visibility:visible !important;
};*/


/* Responsive css */

@media only screen and (max-width: 1440px) {
  body {
    background-color: #000!important;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">

标签： javascripthtmlcssmeta-tags