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

4次阅读

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

理解响应式布局

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

媒体类型作用

all 所有设施

print 打印机和打印预览

screen 电脑屏幕、平板电脑、智能手机等

speech 阅读器等发声设施
响应式布局罕用选项
- 和、不执行：and、not
- 最小、最大宽度：min-width、max-width
- 竖屏：orientation: portrait
- 横屏：orientation: landscape
- 应用 link 标签引入内部响应式布局 CSS 文件，media 管制执行范畴

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

响应式布局实列

.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;}
}

正文完