1. 谈谈响应式布局

什么是响应式布局？

同一个页面在不同分辨率/设备上打开会有不同的布局，简单来说就是一个页面可以兼容多种终端

视口

视口（viewport）就是浏览器中用于呈现网页的区域。WEB端的视口由分辨率决定，而移动端的视口是设备厂商决定的，ios和安卓基本都是980px。

为了解决视口不统一的问题，我们需要使用meta标签中的viewport来解决

  <meta name='viewport' content='width=device-width,initial-scale=1.0,maxium-scale=1.0,user-scale=0'/>

width=device-width：视口为设备宽度，默认为980px; initial-scale=1.0: 初始化的视口大小为1.0倍; maxium-scale=1.0：最大的倍数是1.0倍; user-scale=0：不允许缩放视口;

方案

百分比（流式布局）

百分比布局也叫流式布局、弹性盒布局。 能够使用百分比布局的属性是width,height,padding,margin

百分比属性相对的都是包含块（其中margin、padding相对的是包含块的宽度）

流式布局虽然可以满足大部分的响应式需求，但是对于一些细微的调整还是不够用。

媒体查询

媒体查询是CSS3新增的属性，媒体查询可以根据当前显示设备的特性（屏幕宽度等）为其添加css样式。但是对于低版本IE，媒体查询的兼容性存在问题。

 /** 适配 宽度400px - 600px的设备 */
 @media screen and (min-width: 400px) and (min-width: 600px){}
 /** 适配 宽度大于 1920px 的设备 */
 @media screen and (min-width: 1920px){}

vw/vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。但是每个属性都使用vh/vw，会照成布局的复杂度，所以不建议使用vh/vw来实现响应式。

主要思路就是将px转换为vw/vh

  假设一个UI稿的宽度为1920px, 高度为1080px
  那么在1920*1080的分辨率下，100vw = 1920px；100vh = 1080px
  这样一来，一个300px * 200px的div，以vw和vh为单位，计算方式如下
  width = (300px / 1920px) * 100vw
  height = (200px / 1920px) * 100vh

rem

rem单位的值是根据html根元素中的font-size的值进行动态计算的。 rem可以和媒体查询配合完成响应式布局

  @media screen and (min-width: 320px) { 
    html {
        font-size: 14px;
    } 
  } 
  @media screen and (min-width: 360px) { 
    html {
        font-size: 16px;
    } 
  } 
  @media screen and (min-width: 400px) {
    html {
        font-size: 18px;
    } 
  }

思想

• 一般不给元素设置具体的宽度
• 高度可以设置固定值
• 所有设置的固定值都使用rem单位（首先在HTML中设置一个基准值（font-size，即1em的值）,然后在效果图上获取PX值,布局的时候转化为REM值）
• 使用JS计算屏幕的真实宽度除以设计稿宽度，计算出比例。将之前设置的基准值进行重新设定。