Bootstrap学习笔记（1）弹性Flex和响应式布局

1 为什么要使用弹性布局？
目前，有的网站设计还在使用固定宽度（如996px），期望给所有终端用户带来较为一致的浏览体验。这种固定宽度设计在笔记本上显示刚好，而在部分高分辨率显示器上却会在两边多出些空白，
同理，如果设置1263px的固定宽度，在低分辨率的浏览器上浏览很宽的网页，那么就会出现横向的滚动条，需要用户滑动滚动条才能看清楚网页右边的内容。
2.什么是弹性Flex布局？
Flex布局是在CSS3中引入的，又称为弹性盒模型。该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。
Flex布局对于设计比较复杂的页面非常有用，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖浮动布局实现元素位置的定义以及重置元素的大小。综合而言，Flex布局主要具有如下几点功能：
（1）在屏幕和浏览器窗口大小发生改变时也可以灵活地调整布局。
（2）控制元素在页面的布局方向
（3）按照不同于文档对象模型（DOM）所指定的排序方式对屏幕上的元素重新排序。
2.1.如何开启弹性盒模型？
在css上将display的属性设置为flex；用来自动填充
3.弹性盒模型的好处以及属性。
好处：
（1）可以让盒子里面的元素排在一行
（2）盒子里面元素的高度相同。
属性以及值：
（1）flex ： 伸缩性
（2）flex-direction：伸缩流方向 （行/列）排序，用于内容排序
（2.1）row：行排列，从左到右（默认）
（2.2）row-reverse:行排列，从右到左
（2.3）column:列排列，从上到下
（2.4）column-reverse:列排列，从下到上
（3）flex-warp:伸缩换行
（3.1）nowrap:单行显示；不换行（默认）
（3.2）wrap:多行显示；会换行
（3.2）wrap-reverse:多行显示；会换行，并且颠倒行顺序
（4）justify-content:主轴方向（页面对齐）
（4.1）flex-start：伸缩项目，左对齐（默认）
（4.2）flex-end：右对齐
（4.3）center：居中
（4.4）space-between：第1个在最左边，最后1个在最右边，其余的在中间平均分布
（4.5）space-around：伸缩项目平均分布在行里，两端保留一半空间

（5）align-items：侧轴对齐
（5.1）flex-start：伸缩项目在侧轴起点变得外边距紧靠住改行在侧轴起始边。
（5.2）flex-end：伸缩项目在侧轴终点的外边距紧靠住改行在侧轴终点边。
（5.3）center：伸缩项目的外边距盒在改行侧轴上居中放置。
（5.4）baseline：伸缩项目根据伸缩项目第一行文字的基线对齐。
（5.5）stretch：默认值。伸缩项目拉伸填充整个伸缩容器。
总结：相比浮动等布局技术，Flex布局所创建的布局在处理对其和间距等问题上具有更强大的能力。如果使用这个布局模型，首先只需要将一个容器的display属性设置成伸缩容器。接下来就可以使用一系列的新属性来控制伸缩容器内子元素的排列布局方式。
4.为什么需要响应式布局？什么是响应式布局？
试想一个场景：当有客户要求我们完成一个项目网站的时候，我们正常做完一个基本的网站可以在正常的浏览器上运行，客户很满意，但是过了一段时间，客户过来找我们说最近需求量有点大，他想在手机上就可以操控下这个网站，但是大家知道手机的分辨率大小和电脑是不一样的，当我们的网站在电脑上完全运行时，和手机上看到的分辨率是不一样的，这时我们没有进行设置，手机上我们做的网站都是各种重叠在一起的标签啊 内容，造成页面拥挤，这时客户让你来改下，我们就要重新来在从头到尾改一份，又过了一段时间，客户说想用piad登？？？？ 这时我们就又得改，可以说如果没有响应式布局，就要做到：“为每一种尺寸的屏幕设计一组页面”，想想就痛苦，那么响应式布局就是来彻底的解决这些问题的，可以让我们完成的网站在各个分辨率都可以正常的有美观的显示。
响应式网页设计（Responsive Web Design，RWD）这个术语是由伊桑·马科特（Ethan Marcotte）提出的。他在A List Apart上发表了一篇开创性文章，将三种已有的开发技术（弹性布局、探视图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语有一堆表示相同意思的其他叫法，如流布局、自适应布局、蹲设备设计以及弹性设计。
（4.1）媒体查询
媒体查询是向不同设备提供不同样式的一种不错的方式，它为每种类型的用户提供了最佳的体验效果。要使用媒体查询来制作网页，首先需要学习三个属性：媒体类型、媒体特性和关键词。让我们从媒体类型开始学习。
（4.2）媒体类型
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备制定不同的样式。
在CSS2中常遇到的媒体类型是all（全部）、screen（屏幕）、print（页面打印或打印预览模式），实际上媒体类型不止这三种，W3C公列出十种媒体类型，如下图所示：

媒体类型有近十种之多，可是企业中最常用的就是all、screen、print三种。不过媒体类型引入方式常用的有两种。
（1）@media方式
我们可以使用@media的方式引入。@media是CSS3中新引入的一个特性，称为媒体查询。

@media 媒体类型{

         选择器{你的样式写在这里}

}    

（2）link方法
link方法引入媒体类型其实就是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。

<link rel="stylesheet" href="stylel.css" media="媒体类型" />

（4.3）媒体特性
媒体特性（Media Features）是CSS3对媒体类型（Media Type）的增强版，其实可以将Media Query看成“Media Type（判断条件）+CSS（符合条件的样式规则）”。
W3C共列出13种CSS3中常用的特性，其中常用的如下图所示。

Media Query能在不同的条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。Media Query的语法如下：

@media 媒体类型 and （媒体特性）{CSS样式}

使用Media Query时必须使用@Media开头，然后指定媒体类型和媒体特性。媒体特性的书写方式和样式的书写方式非常相似，如：

（max-width：520px）  /*小于520px时*/

在上面通过两张表列出了常用的媒体类型和媒体特性，将它们组合就类似于不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于、等于或小于作为逻辑判断，而不是只用小于（<）和大于号（>）这样的符号来判断。

（4.4）关键词
媒体特性有的时候不止一条，当出现多个条件并存的时候，就需要通过关键词连接。
1.only关键词，用来指定仅仅用于某种特定的媒体类型的浏览器。其实only很多时候用来对不支持Media Query却支持Media Type的设备隐藏样式表。 例如：IE8能成功解读媒体类型，但是却无法解读and后面的媒体特性语句，就会连带媒体类型一起忽略。为了让不识别媒体特性的浏览器依然识别媒体类型，可以使用only关键字进行选择，如：

<link rel="stylesheet" href="style.css" media="only screen and (max-width:500px)" />

2.and关键词，表示同时满足这两者时生效，到达限定范围，如：

@Media only screen and (max-width:1200px){样式代码...}  /*电脑屏幕并且小于1200px*/

3. not关键词，用来排除某种指定媒体类型，也就是排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

   @Media not print and (max-width : 1200px){/*样式代码*/}

（4.5）媒体查询的使用
在使用媒体查询制作网页的时候，有些地方需要注意一下。
（1）首先来解释一下遇到冲突时的机制：

<link rel="stylesheet" href="styleA.css" media="screen and (min-width : 800px)">

<link rel="stylesheet" href="styleB.css" media="screen and (min-width:600px) and (max-width:800px)">

<link rel="stylesheet" href="styleC.css" media="screen and (max-width:600px">

上面代码将设备分成三种，分别是电脑的屏幕宽度大于800px时应用样式styleA，宽度为600~800px时应用样式styleB，以及宽度小于600px时应用样式styleC。那么假如宽度正好等于800px时应该应用哪个样式？是样式styleB，因为前两条表达式都成立，按CSS默认优先级规则后者覆盖前者。因此，为了避免冲突，这个例子应该这样写：

<link rel="stylesheet" href="styleA.css" media="screen">

<link rel="stylesheet" href="styleB.css" media="screen and (max-width:800px)">

<link rel="stylesheet" href="styleC.css" media="screen and (max-width:600px">

（2）设置主要断点。
简单的来理解就是设置宽度的临界点。在Media Query中，媒体特性min-width和max-width对应的属性值就是响应式设计中的断点值。使用主要断点创建媒体查询的条件，而每个断点会对应调用一个样式文件（或者样式代码）。
常见的断点值为：320px，480px，640px，768px、1024px等

总结

响应式布局的优点：
1.面对不同分辨率设备灵活性强，能够快捷解决多设备显示使用问题。
2. 更少维护，开发一个网站，多终端使用。
响应式布局的缺点
1.兼容各种设备，工作量大
2.代码累赘，会出现隐藏无用的元素，加载时间长。