• 理解响应式布局

    响应式布局是利用媒体查问（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;  }}