在网页排版中，元素的宽度如果只依赖固定的width属性，很容易在设备尺寸差异较大时出现版式崩坏。CSS提供的max-width和min-width属性，专门用来给元素宽度划定上限与下限，使页面既能充分利用大屏空间，又不会在小屏上溢出或挤压。这两个属性并不复杂，但真正用好了可以替代大量媒体查询代码，让布局更具弹性。
max-width与min-width的基本语义及优先级
max-width规定了元素能够拥有的最大宽度，当容器或视口更宽时，元素也不会超过这个值；min-width则规定最小宽度，即使父容器很窄，元素也不会收缩到比它更小。需要特别注意的是，当width、max-width和min-width同时出现且产生冲突时，浏览器遵循“min-width优先于width，width优先于max-width”的覆盖规则。也就是说，如果min-width大于width，实际宽度取min-width；如果width大于max-width，实际宽度取max-width。
这种优先级机制意味着我们能用一句width: 100%; max-width: 600px;就让块级元素在手机上满宽、在桌面上最多六百像素。同理，min-width常用来保护表格列或按钮文字不被压成两行难看点。下面这段样式演示了三者共存时的表现：
.box {
width: 300px;
max-width: 200px; /* 实际宽度被限制为200px */
min-width: 250px; /* 最终实际宽度取250px，覆盖前两者 */
}
从计算逻辑看，浏览器先取width作为基准，再用max-width截顶，最后用min-width保底。因此书写顺序不影响结果，但理解这条链路对排查“为什么我的宽度不生效”非常重要。很多新手把max-width写在媒体查询里却忘了min-width的保底作用，导致某些老旧浏览器或特定flex场景下宽度异常。
在响应式布局中的典型应用场景
最常见的用法是限制正文阅读宽度。研究显示，单行文字超过七十个汉字后阅读效率下降，所以博客正文容器常写max-width: 720px并配合margin: 0 auto居中。这样在超宽显示器上不会出现让人频繁转头的长行，在手机上又能自动占满屏幕。相对地，导航条或工具栏里的图标区域可用min-width防止折叠菜单在窄屏下挤成一团。
另一个场景是图片和嵌入视频的响应式处理。传统做法是用媒体查询切换不同尺寸图，但其实给img设max-width: 100%; height: auto;就能让大图在小屏自适应缩小，又不会在桌面端被放大变虚。若担心极小屏下图片太小看不清，可补一个min-width: 120px。以下代码展示了一个兼顾的媒体容器：
<style>
.media {
max-width: 100%;
min-width: 140px;
height: auto;
display: block;
}
</style>
<img class="media" src="https://ipipp.com/demo.jpg" alt="示例">
在flex布局中，这两个属性还能解决子项被错误压缩的问题。比如flex: 1的元素在空间不足时会被压到内容最小宽度以下，此时显式声明min-width: 0反而能允许它收缩，而声明一个具体min-width: 200px则能保护侧栏。可见同样一个属性，取值为0或具体值，行为截然相反，需要结合伸缩上下文判断。
与盒模型、calc及单位配合的进阶技巧
max-width和min-width支持多种单位，包括px、em、rem、vw以及calc()表达式。使用vw能让上限随视口联动，例如max-width: 90vw保证元素两边始终留白；用calc(50% - 20px)作为min-width则可在分栏布局里精确扣除间距。注意当使用百分比时，基准是父容器的内容宽度，如果父级本身受限，子级的百分比也会跟着受限，这是嵌套布局中容易忽略的连锁反应。
盒模型方面，默认box-sizing: content-box下，设定的宽度不含内边距和边框，因此max-width限制的是内容区；改成border-box后限制的是边框盒总宽。若页面全局用了box-sizing: border-box，那么给按钮设min-width: 80px时，这八十像素已经包含左右各十像素的内边距，实际文字空间只有六十像素，排版时要算清。示例展示了如何用calc避免溢出：
.card {
box-sizing: border-box;
width: 100%;
max-width: calc(100% - 32px);
min-width: 240px;
padding: 16px;
border: 1px solid #ccc;
}
最后提醒，max-width和min-width对绝对定位元素同样有效，但此时百分比基准是包含块的宽度而非视口。在弹窗或悬浮层里用min-width防止提示框窄到文字换行、用max-width防止遮罩层过宽，是提升组件鲁棒性的低成本的手段。把这些边界属性当作布局的“安全带”，而不是事后修补的补丁，样式表会更易维护。