Bootstrap布局之移动开发基础加容器

一.视口概念

视口主要包括布局视口 、视觉视口和理想视口。
视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。

布局视口
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

 视觉视口
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。

 理想视口
理想视口是指对设备来讲最理想的视口尺寸

在开发中，为了实现理想视口，需要给移动端页面添加<meta>标签配置视口，通知浏览器来进行处理。
在<meta>标签的基本语法中，将<meta>标签的content属性的值设置为“width=device-width”表示通知浏览器，布局视口的宽度应该与设备的宽度一致，示例代码如下。

 

 二.媒体查询

CSS的Media Query媒体查询（也称为媒介查询)用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。媒体查询由媒体类型和条件表达式组成。常用的媒体查询属性如下。
1.设备宽高: device-width、device-height。

⒉.渲染窗口的宽和高: width、height。

3.设备的手持方向: orientation。

4.设备的分辨率: resolution。
 

媒体查询的使用方法有两种，即内联式和外联式。
 内联式是直接在CSS中使用，如下例：

页面宽度小于640px时，背景颜色显示浅蓝色

 页面宽度在640px到840px之间时，背景颜色显示粉色

  页面宽度大于840px时，背景颜色显示浅绿色

外联式是作为单独的CSS文件从外部引入的，如下图：
 

 三.栅格系统

栅格系统，即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。

bootstrap布局容器：

概念：在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸。

container类

Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。
根据屏幕宽度的不同，利用媒体查询设定固定的宽度，当浏览器改变大小时，页面会呈现阶段性的变化。
.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。

.container容器

它在每个响应断点处设置了一个max-width最大宽度

.container-fluid容器

Bootstrap 4中的.container-fluid类是一种占据全部视口的容器。
不管屏幕宽度是多少，始终保持100%的宽度。
当一个元素需要始终横跨整个视口时，可以使用.container-fluid类

.container-{breakpoint}容器

它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。
 

例子：