為移動設備調整元素大小

Question

我知道這可能是一個非常常見的問題，但對 HTML、CSS、JS 來說是個新問題。 我真的想要一個直接的答案，所以如果這是重復的，我很抱歉。

我目前正在研究一個 wordle 克隆，但我在調整移動設備的大小方面遇到了問題。 在我的電腦上，尺碼看起來很完美。 但是，當我在手機上訪問它時，底部的鍵盤似乎非常小。

如果我能得到一些幫助來解決這個問題，那就太好了！ 謝謝！

這是我的相關 HTML 代碼：

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale =1, user-scalable=no">

這是我所有相關的 CSS 代碼：

.keyboard-row {
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.key-tile {
    /* Box */
    border: 1px solid lightgray;
    width: 5%;
    height: 40px;
    margin: 1px;

    /* Text */
    font-size: auto;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

移動版看起來像這樣：

Answer 1

嘗試在您的 css 中使用rem單位而不是像素（px） ，同時將您的鍵和文本設置為 rem 和 em 有助於相對於您的父容器進行調整並有助於使項目響應。 或者您也可以使用媒體查詢來解決您的問題。 希望這可能有助於解決您的問題。