使用宽度与使用最小宽度和最大宽度答案

【问题标题】：Using width vs using min-width & max-width使用宽度与使用最小宽度和最大宽度
【发布时间】：2019-03-28 00:11:31
【问题描述】：

当页面的宽度发生变化时，尝试将元素保持在设定的恒定宽度时，使用 css 宽度参数的最佳方法是什么？

（即width: 20rem; & min-width: 20rem; vs min-width: 20rem; & max-width: 20rem;）

仅使用 width: 20rem; 导致侧边栏因宽度变化而缩小：

侧边栏的预期宽度：

当我希望边栏保持相同大小时，它会缩小：

但是使用 width: 20rem; & min-width: 20rem; 似乎可以解决这个问题。

侧边栏的预期宽度：

侧边栏的预期宽度保持不变：

也使用 min-width: 20rem; & max-width: 20rem; 似乎也解决了这个问题。

使用最大宽度的预期宽度：

即使窗口大小发生变化，使用 max-width 的预期宽度：

我的总体问题是首选哪种解决方案以及每种解决方案的后果是什么，因为它们看起来相对相同

通用css代码

.messages-component {

    .threads-sidebar {
        @include box-shadow-helper(1);
        background: white;
        display: flex;
        flex-direction: column;
        width: 20rem;

        .threads-sidebar-header {
            @include box-shadow-helper(1);
            display: flex;
            min-height: 3em;
        }

        .threads-sidebar-body {
            @include box-shadow-helper(1);
            display: flex;
            flex: 1;
            flex-direction: column;

            .test {
                color: $mvn-btn-red;
            }
        }
    }
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

Min-width 和 max-width 指定了可调整大小对象的大小限制。因此，如果您希望您的元素不可调整大小，您应该使用像素（px）而不是 rem 来使用恒定宽度。

【讨论】：

在这种情况下是否首选使用 px ？我被告知总是使用 rem 或 em，因为这些单位在缩放显示时表现更好。
如果您希望组件可扩展，这是正确的，但在这里您似乎不需要。使用 px 的问题在于它会在不同的屏幕尺寸下很快中断，因此您可能希望使用@Jason Smith 的回答来关注 max-width 。这样，您的组件仍将按比例缩小，而不会像您在屏幕截图中看到的那样扩展。

【解决方案2】：

宽度和最小宽度可以一起工作。大多数人在使用它们时使用两种不同的单位，例如：宽度：90%，最小宽度：600px。还值得注意的是 min-width 会覆盖宽度。

W3 min-width

【讨论】：