如何实现一个响应式布局？

语法

@media mediatype and (media feature) {
  /* 应用于特定设备属性的样式 */
}

• mediatype：

  • all：适用于所有设备类型。
  • print：适用于打印机和打印预览模式。
  • screen：适用于电脑屏幕、平板电脑、智能手机等。
  • speech：适用于屏幕阅读器。

• media feature：

  • width：设备的宽度。
  • height：设备的高度。
  • orientation：设备的方向（横向或纵向）。
  • aspect-ratio：设备的宽高比。
  • resolution：设备的分辨率。

示例，移动端优先：

/* 移动端 */
.container {
  padding: 10px;
  font-size: 14px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* 桌面端及以上 */
@media (min-width: 1200px) {
  .container {
    padding: 40px;
    font-size: 20px;
  }
}