使边距固定在两侧（左/右）

Question

如何在缩小视口后保持两边的边距大小固定？

这样只有图像尺寸减小。

减少视口之前：

减少视口后：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Dosis', sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(480px, 33.3vw) 33.3vw 33.3vw;
    background-color: #fdfdfd;
}

.text {
    background-color: #6544d9;
    grid-column: 1;
}

.image {
    grid-column: 2 / 4;
    background: url('https://i.stack.imgur.com/0vKiZ.png') no-repeat;
    background-size: contain;
    background-position: center;
    margin: 100px;

}

    <section class="text"></section>
    <section class="image"></section>

Answer 1

百分比 (%) 和 rem 都是相对单位，但 px 是绝对单位。您的问题的措辞有点令人困惑，但如果您希望边距保持绝对相同的宽度，请使用 px 作为边距。如果您希望边距自动适应视口的大小，请使用 % 或 rem，这两者都是指元素与其根的相对大小。