Container容器(响应式断点)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: DW
作者:蒙林丽
撰写时间:2021/6/7
1、响应式断点
Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的分界点。这些分界点主要基于视口宽度的最小值,并且当窗口视图改变的时候允许元素缩放。
在bootstrap的源Sass文件中,为了实现布局,网络系统以及组件,首先使用下面的媒体查询范围(可以理解为将不同宽度的网页进行拆分并分别载入CSS样式处理构建):
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
由于我们在Sass中写了源CSS,所有的媒体查询通过Sass mixins都是可用的(SASS的Mixins可以一次性定义功能模块,让你在任何地方调用,并且可以无限制大的重用):
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md)