CSS样式——响应式布局

• 了解响应式布局

  响应式布局是利用媒体查询（media queries）针对不同的媒体类型进行不同的布局，从而实现响应式布局

• 响应式布局常见媒体类型

  媒体类型	作用
  all	所有设备
  print	打印机和打印预览
  screen	电脑屏幕、平板电脑、智能手机等
  speech	阅读器等发声设备

• 响应式布局常用选项

  • 和、不执行：and、not
  • 最小、最大宽度：min-width、max-width
  • 竖屏：orientation: portrait
  • 横屏：orientation: landscape
  • 使用link标签引入外部响应式布局CSS文件，media控制执行范围

• 响应式布局实列

  .container,
  .container-fluid,
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }
  @media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
  }
  @media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
  }
  @media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
  }