Container容器（响应式断点）

 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)