max-width限制元素最大宽度，防止内容在大屏上过宽；min-width设定最小宽度，避免小屏压缩过度。两者结合媒体查询定义断点，实现响应式布局：移动优先用min-width逐步增强，桌面优先用max-width向下适配，确保网页在手机、平板、桌面均良好显示。
在响应式设计中，max-width 和 min-width 是控制页面布局在不同设备上表现的关键工具。它们通过设置元素或整个页面的宽度边界，确保内容在各种屏幕尺寸下都能良好显示。
max-width：限制最大宽度
max-width 用于设定一个元素的最大宽度。当容器的实际可用空间大于该值时，元素不会继续拉伸，从而避免内容在大屏幕上变得难以阅读。
- 常用于图片，防止其超出父容器：
img { max-width: 100%; height: auto; } - 用于主内容区域，使页面在宽屏上保持合适的阅读宽度，例如：
.container { max-width: 1200px; margin: 0 auto; } - 结合媒体查询，可以为不同设备设定不同的最大宽度规则
min-width：保证最小可用空间
min-width 确保元素在小屏幕上不会被压缩得太小，维持基本的可读性和交互性。
- 适用于侧边栏或固定宽度模块，防止内容重叠
- 在媒体查询中使用，实现“移动优先”策略，例如：
@media (min-width: 768px) { ... }表示屏幕宽度达到 768px 以上时应用样式 - 帮助定义断点（breakpoints），让布局在合适时机切换为平板或桌面样式
与媒体查询配合实现响应式布局
max-width 和 min-width 在 @media 查询中最为常用，用来根据视口宽度应用不同的CSS规则。
立即学习“前端免费学习笔记（深入）”；
- 移动优先常用 min-width 定义断点，逐步增强样式
- 桌面优先则多用 max-width，从大屏开始，向下适配小屏
- 典型写法：
@media (max-width: 767px) { /* 手机样式 */ }和@media (min-width: 768px) { /* 平板及以上 */ }
基本上就这些。灵活运用 max-width 和 min-width，能让网页在手机、平板、桌面等各种设备上都表现自然，提升用户体验。
