共计 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;} }
正文完