為什么啟用觸摸模式時忽略媒體查詢？-有解無憂

當我使用 vanilla JS 創建簡單網站時，我曾使用過媒體查詢，但今天我使用 React JS、IDK 來完成它，無論是否有問題。每當網站在移動設備或任何帶有觸控內容的螢屏上回應媒體查詢時就像我從未寫過它們一樣被簡單地忽略了。例如：如果我關閉觸摸模擬一切都很好。

我試圖將媒體全部更改為媒體螢屏之類的東西，但它們都沒有奏效..

// media queries width & height

@media (max-width: 810px) and (max-height: 1080px) {
    .platform {
        // width: 70%;
        height: 60%;
    }
}

@media (max-width: 768px) and (max-height: 1024px) {
    .platform {
        width: 80%;
        height: 70%;
    }
}

// media queries height

@media (max-height: 600px) {
    .platform {
        width: 100%;
        height: 100%;
    }
}
// media queries width

@media (max-width: 625px) {
    .platform {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 501px) {
    .title {
        font-size: 3rem;
    }

    .instructions {
        width: 25rem;
        font-size: 1.4rem;
    }

    .die-container {
        gap: 10px;
        width: 25rem;
    }

    .die-item {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 430px) {
    .title {
        font-size: 2.8rem;
    }

    .instructions {
        width: 23rem;
        font-size: 1.3rem;
    }

    .die-container {
        gap: 10px;
        width: 22rem;
    }
    .die-item {
        width: 62px;
        height: 62px;
    }
}

@media (max-width: 390px) {
    .title {
        font-size: 2.5rem;
    }

    .instructions {
        width: 20rem;
        font-size: 1.2rem;
    }

    .die-container {
        gap: 10px;
        width: 20rem;
    }
    .die-item {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 340px) {
    .instructions {
        width: 19rem;
        font-size: 1.1rem;
    }

    .die-container {
        gap: 10px;
        width: 19rem;
    }
    .die-item {
        width: 50px;
        height: 50px;
    }
    .roll-dice {
        width: 8rem;
    }
}

@media (max-width: 340px) {
    .instructions {
        width: 18rem;
        font-size: 1rem;
    }

    .die-container {
        gap: 10px;
        width: 18rem;
    }
    .die-item {
        width: 50px;
        height: 50px;
    }
    .roll-dice {
        width: 8rem;
    }
}

uj5u.com熱心網友回復：

您的媒體查詢在移動設備上不起作用，因為您沒有將視口寬度設定為設備寬度

嘗試將以下內容添加到<head>您的index.html

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454078.html

標籤：css 反应响应式设计媒体查询

上一篇：如何替換css中的文本？

下一篇：如何在VisualStudio代碼上為另一個網路上的人托管實時服務器？