使用 min-width 和 max-width 可控制元素宽度范围，提升响应式设计效果；示例中容器最小320px、最大1200px，适配多端屏幕并居中显示，增强可读性与布局弹性。
在CSS中，可以通过 min-width 和 max-width 属性来控制元素的最小和最大宽度，从而让布局更具弹性与响应性。这些属性常用于响应式设计，确保元素在不同屏幕尺寸下表现合理。
设置最小宽度：min-width
使用 min-width 可以指定元素内容区域的最小宽度。即使容器变小，元素也不会小于设定值。
常见用法：- 防止内容挤压：比如文本或图片在小屏幕上被压缩变形，可设置最小宽度保证可读性。
- 配合弹性布局：在 flex 或 grid 布局中，避免子元素被过度收缩。
div {
min-width: 300px; /* 宽度不会小于300px */
}设置最大宽度：max-width
max-width 限制元素的最大宽度，常用于防止内容在大屏幕上过宽影响阅读体验。
典型场景：- 文本段落排版：长行文字难以阅读，限制最大宽度提升可读性。
- 图片响应式：结合百分比宽度和最大像素值，实现自适应又不失真。
p {
max-width: 800px; /* 宽度不会超过800px */
margin: 0 auto; /* 居中显示 */
}同时使用 min-width 和 max-width
将两者结合，可以为元素定义一个宽度区间，在此范围内自由伸缩，超出则停止变化。
立即学习“前端免费学习笔记（深入）”；
实用例子：.container {
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}这个容器在小屏设备上至少显示320px（适配手机），在大屏上最多扩展到1200px，中间范围随窗口自由调整，居中显示，视觉效果更佳。
基本上就这些。合理使用 min-width 和 max-width，能让你的页面在各种设备上都表现自然、稳定。不复杂但容易忽略细节。
