关于前端学习:CSS样式响应式布局

36次阅读

共计 975 个字符,预计需要花费 3 分钟才能阅读完成。

  • 理解响应式布局

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

正文完
 0