- 首页 > it技术 > >
- 了解响应式布局
响应式布局是利用媒体查询（media queries）针对不同的媒体类型进行不同的布局，从而实现响应式布局
- 响应式布局常见媒体类型
| 媒体类型 |
作用 |
| all |
所有设备 |
| print |
打印机和打印预览 |
| screen |
电脑屏幕、平板电脑、智能手机等 |
| speech |
阅读器等发声设备 |
- 响应式布局常用选项
- 和、不执行：and、not
- 最小、最大宽度：min-width、max-width
- 竖屏：orientation: portrait
- 横屏：orientation: landscape
- 使用link标签引入外部响应式布局CSS文件，media控制执行范围
- 【CSS样式——响应式布局】响应式布局实列
.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;
}
}
推荐阅读
