响应式布局

栅格系统

• 栅格系统的基础就是媒体查询和浮动布局

px

• px像素，是绝对长度单位的一种，它的大小是根据用户屏幕显示器的分辨率决定的（因此不同的设备显示相同的像素值也可能会有不同的结果）
• 在移动端的布局中，我们可以通过viewport元标签来控制布局，比如一般情况下，我们可以通过下述标签使得移动端在理想视口下布局

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

image.png

em

• 浏览器在默认状态下的字体大小都是16px，1em = 16px
• em是相对长度单位，是当前元素相对于父元素字体的大小而言的。例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px

等比例缩放（rem）

• rem 单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。
• 为了计算方便，通常可以将html的font-size设置成： html{ font-size: 62.5% }，即 1 rem = 10px

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
// 上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。

固定内容区宽度

• 给网页的内容区，设置一个宽度，内容区居中、两边留白

最精准的方案（媒体查询 @media）

• 给不同尺寸的设备，设置单独、互不影响的 css 属性

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

百分比布局（ % / vw / vh ）