使用宽度与使用最小宽度&最大宽度

问题描述

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

What is the best way to use the css width parameters when trying to keep an element at a set constant width even when the width of the page changes?

(即 width:20rem;& min-width:20rem; 与 min-width:20rem;& max-width:20rem; )

仅使用 宽度:20rem； 导致边栏因宽度变化而缩小:

侧边栏的预期宽度:

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

Sidebar shrinks when I would like it to remain the same size:

但是使用 width:20rem;&min-width:20rem； 似乎可以解决此问题.

侧边栏的预期宽度:

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

Expected width of the sidebar remains:

也使用 最小宽度:20rem；&max-width:20rem; 似乎也可以解决此问题.

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

Expected width using max-width:

即使窗口大小发生变化，使用最大宽度的预期宽度:

Expected width using max-width even when window size changes:

我的总体问题是，哪种解决方案更可取，并且每种解决方案看起来相对相同的后果是什么

My overall question is which solution is preferred and what are the consequences of each as they both seem relatively the same

一般的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;
            }
        }
    }
}

推荐答案

最小宽度和最大宽度指定可调整大小对象的大小限制.因此，如果您希望元素的大小不可调整，则应使用像素(px)而不是rem来使用恒定宽度.

Min-width and max-width specify constraints on how large/small a resizable object can go. So if you want your element to not be resizable you should just use a constant width by using pixels(px) instead of rem.

这篇关于使用宽度与使用最小宽度&最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！