概念:
课程目标：
- 响应式布局技术
- 了解BootStrap前端框架
1.1 历史问题
回顾之前HTML+CSS的布局方式，都是使用像素（px）来布局网页的，可是现在随着用户使用终端设备的多样化，平板手机已经很常见，所以如何制作适合手机使用的网页？
还是使用以前的固定单位去布局，会引发两个问题：
（1）分辨率太大，网页两边留白太多
（2）分辨率太小，页面显示不完全
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMUZfhQt-1589378488273)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513093705933.png)]
概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的flex布局，就是其中一种。 flex布局，能够将容器，按照特定的比例进行划分，从一维的角度，去更好的对容器进行布局。
历史：
1.固定布局：使用的是div aside article标签，width：xxx px;像素；
2.浮动 百分比的方式；width:100%; widht:90%,发现比刚才要好多了；还是有问题，适应手机的时候；
摘要，没有东西了，还继续留空白在右边；
3.Flex布局，怎么回事？弹性布局
非常easy:最外面的div,设置它的display:flex,设置成弹性布局即可。里面的width:30%;
width:67%;,可以保持不变。如果都去掉了，注意看它的变化。
1.2 Flex容器
任何元素都能作为flex容器，只要使用display:flex，进行描述，该容器就成为了一个flex容器。
伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。
| 属性 | 说明 |
|---|---|
| flex | 伸缩性 |
| flex-direction | 伸缩流方向 row row-reverse column column-reverse |
| flex-wrap | 伸缩换行 nowrap wrap wrap-reverse |
| justify-content | 主轴对齐 |
| align-items | 侧轴对齐 |
参考代码：
.box {display: flex; border: 1px solid #000000; padding: 10px; }aside { flex:1;background: red; padding: 10px; }article { flex:1; margin-left: 10px; background: yellow; }12341.3 响应式布局
- 弹性布局
- 弹性图片
- 媒体和媒体查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7ZTQb0M-1589378488282)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513112622424.png)]
优点
1.面对不同分辨率设备灵活性强，能够快捷解决多设备显示使用问题
2.更少维护，开发一个网站，多终端使用
缺点
1.兼容各种设备工作量大,网上重复性的代码，你看适合浏览器即可。
2.代码累赘，会出现隐藏无用的元素，加载时间长
1.3.1 媒体类型
方式1：
@media 媒体类型 {
选择器{ /样式代码写在这里…/}
}
方式2：
<link rel=“stylesheet” href=“style.css” meida=“媒体类型”/>
| 属 性 | 值 | Min/Max | 描 述 |
|---|---|---|---|
| device-width | Length | Yes | 设置屏幕的输出宽度 |
| device-height | Length | Yes | 设置屏幕的输出高度 |
| width | Length | Yes | 渲染界面的宽度 |
| height | Length | Yes | 渲染界面的高度 |
| Orientation | Portrait/landscape | No | 横屏或竖屏 |
| Resolution | 分辨率（dpi/dpcm） | Yes | 分辨率 |
| Color | 整数 | Yes | 每种色彩的字节数 |
| color-index | 整数 | Yes | 色彩表中的色彩数 |
1.3.2 ViewPort
概念：
视窗指的是用户在网页上的可见性，根据设备的不同而不同。网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。
设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">1
width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
initial-scale: 页面初始缩放的比例。
user-scalable: 是否允许用户缩放。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
1.3.3 网格视图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5CP4uqPt-1589378488295)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513120308393.png)]
在设计网页时，使用网格视图非常有用。它可以更轻松地在页面上放置元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UiHQ3K9C-1589378488300)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513120334686.png)]
响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。
让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
* {
box-sizing: border-box;}123小和展开。
让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
* {
box-sizing: border-box;}123[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2hWZxIcK-1589378488308)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513160850207.png)]
