保安日记：前端学习第十二篇之移动端布局-流式布局、flex布局

移动端常见布局方案：

• 单独制作移动端页面（主流）
  1.流式布局（百分比布局）
  2.flex弹性布局（重点）
  3.less+rem+媒体查询布局
  4.混合布局
• 响应式页面兼容PC移动端（其次）
  1.媒体查询
  2.boorstrap

单独制作移动端页面（主流）：

1、流式布局（百分比布局）：
流式布局也称为非固定像素布局，通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

防止无限拉伸 内容显示不佳 设定一个最大最小宽度
max-width 最大宽度
min-width 最小宽度

   <style>
      section {
   
        width: 100%;
        max-width: 1000px;
        min-width: 350px;
      }
      section div {
   
        float: left;
        width: 50%;
        height: 400px;
      }
      div:nth-child(1) {
   
        background-color: pink;
      }
      div:nth-child(2) {
   
        background-color: red;
      }
    </style>

二倍精灵图做法：

• 在fireworks里面把精灵图等比例缩放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写：精灵图为原来的一半

2、flex布局（弹性布局）：
对比传统布局：

传统布局	flex布局
1.兼容性好	1.操作方便，布局极为简单，移动端应用很广泛
2.布局繁琐	2.PC端浏览器支持情况较差
3.局限性	3.IE11或更低版本，不支持或仅部分支持

布局原理：
用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item&#x