2020-06-30

Bootstrap响应式网页开发

（1）响应式网页是指一个网页会根据用户浏览器设备不同而自动改变布局。一个网页，可以被PC、平板电脑和手机正常浏览。

（2）视口，就是显示设备中专门用于放置网页内容的容器。视口的尺寸可以随意指定，且视口与显示设备的物理分辨率无关。定义视口大小和初始时视口缩放比例，可用代码：。其中，width=device-width，表示视口宽与浏览器在当前显示设备下的默认视口宽相同。Initial-scale=1，表示初始显示时，视口默认的缩放比例，通常值为1，表示不缩放。

（3）流式布局主要指使用浮动定位和行内块方式显示网站各个区域。使用流式布局的特点是，内容可根据容器宽自动换行，从而实现自适应的效果。可使用以下代码实现流式布局：

float:left;display:inline-block;

（4）媒体查询中的媒体，指浏览网页的设备，如显示器。媒体查询，就是查询当前浏览网页的设备的类型及特性，如屏幕尺寸。然后，根据设备和特性不同，选择执行不同的CSS代码。

（5）根据媒体查询执行不同CSS文件，使用引入CSS文件时，可设置media属性为一个判断条件，来判断当前显示设备是否符合要求。只有link元素的media属性判断条件符合要求，才执行该CSS文件。否则，忽略该CSS文件。例如，要求显示设备视口宽大于768px，才能执行print.css文件，代码为：<link media="screen and（min-width：768px）"rel="stylesheet"href=“print.css”/>。其中，screen表示必须是显示屏，而不能是打印机；and表示而且的意思；（min-width：768px）表示视口宽至少是768px。两个条件都满足，才应用print.css。

（6）设备种类可分为三类：min-width：992px，表示浏览器视口宽大于或等于992px，说明是PC显示器大小范围；min-width：768px and max-width：991px，表示浏览器视口宽大于或等于768px而且小于或等于991px，说明是平板电脑显示屏大小；min-width：767px，表示浏览器视口宽小于或等于767px，说明是手机显示屏大小。

（7）如果希望按照设备物理屏幕宽应用不同的样式表，应使用物理显示屏宽。用min-device-width代替min-width，用max-device-width代替max-width。二者的差别是，width表示浏览器软件的视口宽，与设备物理显示屏宽无关，而device-width表示物理设备显示屏宽。

（8）在一个样式表内，也可根据不同设备，应用不同的选择器。在样式表内，可用@media关键词后跟判断条件，来匹配一类设备。语法结构如下：

@media判断条件{

选择器{css属性:值;…}

…

}

@media条件后用{}包裹一组选择器规则，而不是直接包含CSS属性。意为只有满足判断条件的设备，才启用{}中的选择器规则。

（9）栅格布局系统，就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

（10）栅格布局系统的基本结构如下：

…