css - 使用宽度与使用最小宽度和最大宽度
问题描述
即使页面宽度发生变化,尝试将元素保持在设定的恒定宽度时,使用 css 宽度参数的最佳方法是什么?
(即width: 20rem; & min-width: 20rem;
vs min-width: 20rem; & max-width: 20rem;
)
使用 just 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;
}
}
}
}
解决方案
min-width 和 max-width 指定了可调整大小的对象的大小限制。因此,如果您希望您的元素不可调整大小,您应该使用像素(px)而不是 rem 来使用恒定宽度。
推荐阅读
- javascript - 在 React 上使用 Jest 和 Enzyme 调用 clearInterval 的单元测试方法
- amazon-web-services - Jupyter 深度学习 AMI
- java - Firebase Firestore Android发生变化时如何实现通知?
- angular - Angular 服务注入设计模式与两个密切相关的服务
- postgresql - 在 postgresql 的查询结果中返回不同的列
- r - 按月对 xts 进行分组
- oauth2-playground - 请求访问令牌时获取 HTTP 400
- django - 从django中的父类实例中查找子类中的对象
- python - python:如果文件在每一行中都包含相同的字符串,则 line.startswith(str) 将不起作用
- docker - 使用主机上的 nginx 反向代理在 docker 中部署 nextjs 应用程序