如何使 html 中的按鈕在屏幕分辨率后調整大小？

Question

這是我的代碼。 在這里，當我更改選項卡分辨率時，我有 2 個按鈕保持在同一個 position 中。 你知道我應該改變什么嗎？ 我嘗試使用 % ，但效果不如預期：)。

我希望我的按鈕沿着選項卡的大小移動，但我縮小了 web 選項卡並且按鈕保持在同一個位置。 一個解法？

 .button { display: inline-flex; height: 25px; padding: 0; background-color: rgb(190, 190, 190); border: none; outline: none; border-radius: 5px; overflow: hidden; font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 400; cursor:pointer; text-align:center; position: relative; left:86.1%; top:-50px; transition-duration: 0.5s; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }.button2{ display: inline-flex; height: 25px; padding: 0; background-color: rgb(255, 0, 0); border: none; outline: none; border-radius: 5px; overflow: hidden; font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 400; cursor:pointer; text-align:center; position: relative; left:86.3%; top:-50px; transition-duration: 0.5s; box-shadow: 0 8px 16px 0 rgba(206, 7, 7, 0.2), 0 6px 14px 0 rgba(88, 0, 0, 0.19); }

        display: inline-flex;
        height: 25px;
        padding: 0;
        background-color: rgb(190, 190, 190);
        border: none;
        outline: none;
        border-radius: 5px;
        overflow: hidden;
        font-family: 'Quicksand' , sans-serif;
        font-size: 15px;
        font-weight: 400;
        cursor:pointer;
        text-align:center;
        position: relative;
        left:86.1%; top:-50px;
        transition-duration: 0.5s;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
        .button2{
        display: inline-flex;
        height: 25px;
        padding: 0;
        background-color: rgb(255, 0, 0);
        border: none;
        outline: none;
        border-radius: 5px;
        overflow: hidden;
        font-family: 'Quicksand' , sans-serif;
        font-size: 15px;
        font-weight: 400;
        cursor:pointer;
        text-align:center;
        position: relative;
        left:86.3%; top:-50px;
        transition-duration: 0.5s;
        box-shadow: 0 8px 16px 0 rgba(206, 7, 7, 0.2), 0 6px 14px 0 rgba(88, 0, 0, 0.19);
    }

Answer 1

使用媒體查詢在不同大小的屏幕上設置不同大小的按鈕。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp