自适应网页(响应式布局)+弹性布局

1.自适应网页
1.声明viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes/no">
注：width=device-width 让宽度为设备宽度
   initial-scale=1    设置初始缩放比例
   user-scalable=no   设置用户是否可以手动缩放
2.使用流式布局
   实现方案：float:left
     display:inline-block;
     弹性布局 display:flex;
3.所有容器使用相对尺寸(%)，所有文字使用相对尺寸(rem/em)，所有图片使用相对尺寸(将图片设置为响应式图片max-width:100%;height:auto)
4.CSS3媒体查询技术
媒体查询技术两种使用方法：
1.根据媒体查询结果执行不同的外部CSS文件(不推荐使用)
<link media="screen and (min-width:768px) and (max-width:996px)" rel="stylesheet" href="css/screen_pad.css">
此方法不推荐使用，因为浏览器会请求不符合条件的外部CSS文件，影响效率
2.根据媒体查询结果执行css片段中不同的选择器(推荐)
@media screen and (min-width:768px ) and (max-width:996px){
选择器样式设定
}
5.框架(bootstrap)
2.响应式应用遇到的问题
1.用百分比实现响应式时出现的问题
1.在设置好样式后，当缩小或放大浏览器窗口，或者是将手机横屏后，布局会乱，刷新后布局又好了。
原因：网页加载后，css已经渲染到页面，将手机横屏后，虽然宽度已经改变，但是CSS已渲染成功，无法改变，导致布局会乱。
解决方法：
   1.添加js事件，监听屏幕尺寸变化事件(resize事件)，在屏幕变化时重新加载页面(reload)。此方法存在问题，就是在页面上已经输入的表单文字或者其他在网页刷新时会清空。(不推荐使用)
   2.添加js事件，监听屏幕尺寸变化事件(resize事件)，获取当前屏幕宽度，动态设置根元素的宽度为屏幕宽度。
2.百分比设置响应式时，不同像素的百分比相差很大。比如1920px屏幕和800px的屏幕，用相同百分比设置页面时，差距很大，页面效果很差。所以，应配合媒体查询技术，配置不同分辨率的百分比。
3.用百分比设置页面时，如果页面无限缩小后，一些字或者图片或者图表等会产生堆叠，所以建议设置最外层容器的最小宽度min-width为一个固定像素的值(如：min-width:800px)，当屏幕宽度达到800时将产生滚动条，不会发生堆叠，可提升用户体验
3.弹性布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html    这篇博客解释的很好，大家可以看看
        CSS中常见布局方式
1.利用表格布局
表格布局是一种很古老的布局方式，浏览器在渲染表格时，会进行大量计算，影响效率，不推荐使用
2.盒状模型
依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而且盒状模型会产生一些问题，例如子元素全浮动，会导致父元素无高度。外边距溢出等问题。虽然可以 解决，但是一不留心就不出现问题。
3.弹性布局
1.简单，好理解，易于使用
2.支持响应式
3.目前大部分浏览器均支持。
Chrome 21+    Opera 12.1+    Firefox 22+    Safari 6.1+    IE 10+
任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局，Webkit内核需加-webkit-前缀 ： display:-webkit-flex;
display:flex;
display:inline-flex;
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。


采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。


容器的属性：
flex-direction: row|row-reverse|column|column-reverse;决定项目的排列方向
flex-wrap: flex-wrap: nowrap | wrap | wrap-reverse;项目多时决定项目是否换行
flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content: flex-start左对齐
| flex-end 右对齐
| center 居中
| space-between 两端对齐，项目之间的间隔都相等。
| space-around 每个项目两侧的间隔相等。
决定了项目主轴对齐的方式
align-items: flex-start 交叉轴的起点对齐。
  | flex-end 交叉轴的终点对齐。
  | center 交叉轴的中点对齐。
  | baseline 项目的第一行文字的基线对齐。
  | stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。
  定义项目在交叉轴上如何对齐。
align-content: flex-start 与交叉轴的起点对齐。
    | flex-end 与交叉轴的终点对齐。
    | center 与交叉轴的中点对齐。
    | space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
    | space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    | stretch 轴线占满整个交叉轴。
    定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性：
order:数值。数值越小排列越靠前
flex-grow：数值，属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：数值，属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
 | auto 
 | flex-start 
 | flex-end 
 | center 
 | baseline 
 | stretch;
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。