响应式布局

day 5 响应式布局

• 一份代码相应不同终端

  响应原理

  各个档位下的版心 container

  市场约定档位划分:

  • w<768 超小屏幕（xs : extra small）（手机，学习rem布局里面的档位划分都是在这个范围）
  • 768<= w <992 小屏设备（sm : small）（平板）
  • 992<= w <1200 中等屏幕（md: medium）（桌面显示器）
  • 1200<=w 大宽屏设备（lg: large）（大桌面显示器）

  
  //不同档位下版心
  //超小屏xs
  @media screen and (min-width:0px) {
  .container {
  width:100%;
  }
  }
  //sm小屏
  @media screen and (min-width:768px) {
  .container {
  width:750px;
  }
  }
  //小PC --md
  @media screen and (min-width:992px) {
  .container {
  width:970px;
  }
  }
  //大PC   lg
  @media screen and (min-width:1200px) {
  .container {
  width:1170px;
  }
  }
  

  如果使用了上面某个档位的类名,按照顺序生效;

  bootstrap 框架

  1.重点:栅格系统;响应式工具

  2.bootstrap项目不需要引入normolize.css

• 栅格系统:

  • 12份 一份8.33333…%

• 列嵌套

  • 盒子有左右15px 的padding值,row:往外走设置15px;表现出来相当于把父亲的15px的padding抵消了,实际是自己向外拉伸了

  • .row {

    margin-left:-15px;

    margin-right:-15px;}

    row要包子元素

​

• 列偏移:左右布局 或 居中布局；

      <!-- 列偏移 -->
      <!-- 居中 -->
      <div class="col-lg-6 col-lg-offset-3 son">这是个6份</div>
  
      <!-- 两边相同的宽度  -->
      <div class="col-lg-4 son">4</div>
      <div class="col-lg-4 col-lg-offset-4 son">4</div>
  

• 响应式工具(类名):

  • BS预制类名,可以控制元素在各个档位下的显示或隐藏
  • hidden-md 只在md档位隐藏(封闭式档位)
  • 代码选择,传统布局,flex有PC端兼容问题

• UI出图,多张图,一把情况下四张图,可能5张;一张图补充一个新档位;

  • 看ui给的图,从哪个图往后布局都是一样的(占有份数是一样的),那么这个图就是选择列分配的入口的图;
  • 只要小于992px,md档位下的类名就不生效了
  • min-width起始值;max-width;终止值