为什么我的手机媒体查询在平板电脑查询中被忽略

Question

Heya不知道为什么要这样做，但是我的页面在台式机和平板电脑上看起来不错，但是电话尺寸查询从未显示出来，我也不知道为什么。这是剥离的CSS：

.grid-container {
    display: grid;
    height: 100%;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 0.25fr;
    grid-gap: 2px 2px;
    grid-template-areas: ". shop resource help buttons badges" ". aghlogo about phone address badges" "copyright copyright copyright copyright copyright copyright";
    margin-top: 10vh;
    margin-left: 2vw;
    margin-right: 2vw;
}

@media only screen and (max-width: 768px) {

    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-gap: 1px 1px;
        grid-template-areas: "buttons" "shop" "resource" "help" "badges" "aghlogo" "about" "phone" "address" "copyright";
        text-align: center;
    }
}
@media only screen and (max-width: 1023px) {
    .grid-container {
        display: grid;
        height: 100%;
        margin-top: 10%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: .5fr .5fr .5fr .5fr;
        grid-gap: 1px 1px;
        grid-template-areas: "buttons shop resource help" "badges badges badges badges" "aghlogo about phone address" "copyright copyright copyright copyright";
    }
}

任何帮助将不胜感激。

Answer 1

您确定屏幕尺寸正确吗？ 您可以找到一个list of media queries here。

然后可以在浏览器中进行测试。在Chrome中，right-click然后选择Inspect，然后单击此图标：

Answer 2

使用（最大宽度：..）和（最小宽度：..）值设置最小宽度和最大宽度：

@media screen and (max-width: 1023px) and (min-width: 768px) {}

希望它解决了。

在这里https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

了解更多

祝你好运！