本专题讲解响应式设计的核心技术，包括媒体查询的使用方法、视口单位的应用、响应式图片的实现方案，以及移动优先设计策略。帮助开发者构建适配不同设备的现代化网页。
本专题适合初学者入门。建议先理解媒体查询的基本概念，再学习视口单位和响应式图片技术。移动优先设计是响应式开发的重要思想，应重点掌握min-width媒体查询的使用方法。
📝 发现内容有误？点击此处直接编辑
媒体查询（Media Queries）是CSS3中引入的特性，可以根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则。
以下哪个媒体查询表示"当屏幕宽度大于等于768px时应用样式"？
在进行响应式设计时，以下关于断点（Breakpoints）选择的做法，哪个是最佳实践？
以下哪些是CSS媒体查询中常用的媒体特性？
在HTML中使用link标签引入样式表并添加媒体查询，代码如下：
<link rel="stylesheet" href="mobile.css" !!1_媒体类型!!="screen" !!2_媒体查询!!="(max-width: 600px)">
媒体查询中的 only 关键字用于隐藏样式，使样式仅对支持媒体查询的浏览器可见，对于不支持的旧浏览器会忽略整个媒体查询。
CSS中的视口单位 vw 和 vh 分别表示视口宽度和高度的百分比，1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
如果希望元素在任何屏幕方向（横屏或竖屏）下都保持正方形，应该使用哪个单位？
除了vw和vh，CSS还提供了vi和vb两个视口相关单位：
vi 表示视口内联方向的 1%，在水平书写模式下等于 ______vb 表示视口块级方向的 1%，在水平书写模式下等于 ______使用CSS属性 max-width: 100%; 可以确保图片永远不会超出其容器的宽度，同时保持图片的原始宽高比。
以下哪个HTML元素用于为不同屏幕尺寸提供不同版本的图片？
使用img标签的srcset属性可以为不同分辨率设备提供不同图片：
<img src="normal.jpg"
srcset="normal.jpg 1x, __________ 2x, ____________ 3x"
alt="响应式图片">
其中 1x、2x、3x 表示设备的 ________。
移动优先设计（Mobile First）是一种设计理念，它建议从最小屏幕开始设计，然后逐步为更大屏幕添加样式。
采用移动优先设计策略时，应该使用哪种类型的媒体查询？
以下哪个不是移动优先设计的优势？
移动优先设计原则包括以下哪些要点？
补全以下移动优先的CSS代码：
/* 基础样式 - 移动端 */
.container {
width: 100%;
padding: 10px;
}
/* 平板样式 */
@!!1_media!! (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* 桌面样式 */
@!!2_media!! (min-width: 1024px) {
.container {
width: 960px;
padding: 30px;
}
}
移动优先设计相比桌面优先设计，在CSS代码量上通常会更少，因为基础样式针对移动端更简洁，而桌面优先需要为移动端覆盖大量桌面样式。
📝 发现内容有误？点击此处直接编辑
长按或扫描二维码，立即体验