max-width 应用
max-width 限制宽度、响应式适配、与 width 的配合
max-width 应用
max-width 限制元素最大宽度——让内容在大屏幕上不会过宽，在小屏幕上自适应。
学完本章你将： 掌握 max-width 限制宽度、响应式适配。
基本用法
css
/* 内容区最大 1200px，小屏幕自适应 */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}响应式容器
css
/* 不同断点的最大宽度 */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }图片自适应
css
img {
max-width: 100%; /* 不会超出父容器 */
height: auto; /* 保持比例 */
}vs width
css
/* width: 100% → 始终和父元素一样宽 */
.full { width: 100%; }
/* max-width: 100% → 不超过父元素，但可以更窄 */
.responsive { max-width: 100%; }