CSS响应式设计

使用CSS属性 max-width: 100%; 可以确保图片永远不会超出其容器的宽度，同时保持图片的原始宽高比。

移动优先设计（Mobile First）是一种设计理念，它建议从最小屏幕开始设计，然后逐步为更大屏幕添加样式。

CSS中的视口单位 vw 和 vh 分别表示视口宽度和高度的百分比，1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

移动优先设计相比桌面优先设计，在CSS代码量上通常会更少，因为基础样式针对移动端更简洁，而桌面优先需要为移动端覆盖大量桌面样式。

媒体查询（Media Queries）是CSS3中引入的特性，可以根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则。

媒体查询中的 only 关键字用于隐藏样式，使样式仅对支持媒体查询的浏览器可见，对于不支持的旧浏览器会忽略整个媒体查询。

在进行响应式设计时，以下关于断点（Breakpoints）选择的做法，哪个是最佳实践？

以下哪个媒体查询表示"当屏幕宽度大于等于768px时应用样式"？

以下哪个不是移动优先设计的优势？

以下哪个HTML元素用于为不同屏幕尺寸提供不同版本的图片？

如果希望元素在任何屏幕方向（横屏或竖屏）下都保持正方形，应该使用哪个单位？

采用移动优先设计策略时，应该使用哪种类型的媒体查询？

以下哪些是CSS媒体查询中常用的媒体特性？

移动优先设计原则包括以下哪些要点？

在HTML中使用link标签引入样式表并添加媒体查询，代码如下：

<link rel="stylesheet" href="mobile.css" !!1_媒体类型!!="screen" !!2_媒体查询!!="(max-width: 600px)">

使用img标签的srcset属性可以为不同分辨率设备提供不同图片：

<img src="normal.jpg"
     srcset="normal.jpg 1x, ____________ 2x, ____________ 3x"
     alt="响应式图片">

其中 1x、2x、3x 表示设备的 ____________。

补全以下移动优先的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;
  }
}

除了vw和vh，CSS还提供了vi和vb两个视口相关单位：

• vi 表示视口内联方向的 1%，在水平书写模式下等于 ____________
• vb 表示视口块级方向的 1%，在水平书写模式下等于 ____________