min-width 和 max-width 用于限制元素宽度上下界，优先于 width 等规则生效；与 flex/grid 配合时控制压缩与拉伸边界；响应式中推荐用媒体查询的 min-width 而非元素级属性；IE11 不支持 calc() 混合单位，且对 inline 元素无效。
min-width 和 max-width 的基本用法
直接用 min-width 和 max-width 就能限制元素宽度的上下界，浏览器会优先满足这些约束，再应用其他宽度规则（比如 width 或 flex 分配）。它们不替代 width，而是补充——当内容撑不开或缩太小的时候，这两个属性才真正起作用。
常见误用是只设 width: 100%，结果在小屏上溢出，在大屏上又过宽。加一层 min-width 和 max-width 就能守住边界：
div {
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}和 flex / grid 配合时的优先级问题
在 flex 容器里，子项的 min-width 会阻止它被压缩到小于设定值，哪怕父容器空间紧张；max-width 则限制它能拉伸的最大尺寸，哪怕有富余空间。但要注意：如果子项同时设置了 flex: 1，它默认会忽略 width，但 min-width 和 max-width 依然生效。
-
flex-basis设为auto（默认）时，min-width/max-width在计算基础尺寸后才介入 - 设为具体值（如
flex-basis: 200px）时，min-width仍可阻止压缩，但max-width不影响flex-basis的初始值，只管最终渲染宽度 - Grid 中类似，
minmax(300px, 1fr)是更语义化的写法，但单独对 grid item 设置min-width同样有效
响应式断点中容易忽略的单位和触发时机
用 em 或 rem 写 min-width/max-width 时，实际生效值取决于当前字体大小，不是固定像素——这在嵌套缩放或用户修改字号时可能意外突破预期边界。多数场景下用 px 更可控；若需相对性，优先考虑媒体查询中的 min-width 媒体特性，而非元素自身的 min-width 属性。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询里的
@media (min-width: 768px)检查的是视口宽度，和元素自身min-width无关 - 元素的
min-width: 768px是强制该元素至少占 768px 宽，哪怕父容器只有 500px，它也会触发横向滚动 - 两者混用时，先由媒体查询切换布局结构，再由元素级
min/max-width微调内部尺寸
IE 兼容与 calc() 表达式里的坑
IE11 支持 min-width 和 max-width，但不支持 calc() 中混合单位（如 calc(100% - 2rem)），若在里面用了 min-width，整个表达式会失效。稳妥做法是拆开写：
.box {
width: calc(100% - 40px);
min-width: 300px; /* IE11 能识别 */
}另外，某些旧版 Safari 对 max-width 在 table 元素上的表现异常，建议避免直接设在 table 上，改用包裹层控制。
最常被跳过的细节是：这些属性对 display: inline 元素无效，必须是块级、inline-block、flex 或 grid 等可设置尺寸的显示类型。
