响应式设计入门
viewport、移动优先、断点设置、响应式图片/视频
响应式设计入门
响应式 Web 设计（RWD） 让同一个网页在手机/平板/桌面都好看。
学完本章你将： 掌握 viewport、移动优先、断点、响应式图片/视频。
第一步：viewport
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">移动优先策略
css
/* 1. 先写移动端样式（默认） */
.container { padding: 15px; }
.col { width: 100%; }
/* 2. 用 min-width 逐步增强 */
@media (min-width: 768px) {
.container { padding: 30px; }
.col { width: 50%; float: left; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; margin: 0 auto; }
.col { width: 33.33%; }
}响应式图片
css
img { max-width: 100%; height: auto; }html
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<img src="small.jpg" alt="响应式图片">
</picture>响应式视频
css
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}