Почему медиа-запрос моего телефона игнорируется из-за запроса планшета

Question

Хейя не уверена, почему это происходит, но моя страница отлично смотрится на десктопе и планшете, но запрос размера телефона не отображается, и я не знаю почему.Вот раздетый 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

Используйте значения (max-width: ..) и (min-width: ..), чтобы установить минимальную ширину и максимальную ширину:

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

Надеюсь, это решено.

Подробнее здесь https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Удачи!

Answer 2

Вы уверены, что размеры экрана правильные? Вы можете найти список медиа-запросов здесь .

Затем вы можете проверить в вашем браузере. В Chrome right-click затем выберите Inspect, затем нажмите на этот значок: