读书笔记（八）：响应式布局

1.相对单位

em：相对于当前元素或继承来的字体的宽度。
rem：相对于根节点的字体大小。
vh、vw、vmin、vmax：相对于视口的宽度、高度。
%、calc():根据屏幕宽度计算。

禁用用户缩放功能，使页面宽度和设备宽度对齐，这种操作一般是移动端响应式适配的标配。

<meta name="viewport" content="width=device-width,initial-scale=1,mininum-scale=1,maximun-scale=1,user-scaleble=no,viewport-fit=cover">

2.实例分析
淘宝实例：
在页面根节点html元素上设置了font-size，当我们改变浏览器大小时，html的font-size就会动态发生变化。采用rem作为相对单位的长宽数值都会随着resize事件进行变化，通过js计算得到。

网易实例：
采用了rem布局，区别是通过媒体查询和calc，枚举了不同设备下不同的html的font-size。

bootstrap主要通过百分比宽度（max-width: 50%;max-width: 25%;）、flex属性及媒体查询，来实现栅格化布局的。
flex的默认值是0 1 auto，它包括：
flex-grow：该属性定义项目的放大比例，默认值是0（如果存在剩余空间，也不放大）。
flex-shrink：该属性定义了项目的缩小比例，默认值是1（如果空间不足，该项目将缩小）。
flex-basis：该属性定义了再分配多余空间之前，项目占据的主轴空间。

3.横屏适配

• js检查

   window.addEventListener('resize', () => {
    if (window.orientation === 180 || window.orientation === 0) {
      // 竖屏
    }
    if (window.orientation === 90 || window.orientation === -90) {
      // 横屏
    }
  })
  

• css实现

  @media screen and (orientation: portrait) {
    // 竖屏
  }
  
  @media screen and (orientation: landscape) {
    // 横屏
  }
  

4.布局性能
在使用相同数量的元素及实现相同视觉外观的情况下，flex布局所花费的布局完成时间要少的多。
布局性能开销与需要布局的元素数量和布局的复杂性相关。
为提高布局性能需要注意：尽可能避免触发布局（layout/reflow），避免强制同步布局和布局抖动。