响应式布局方案

一、介绍

简单来说，响应式布局就是一套代码能够适配多种终端，可以让网站同时适配不同分辨率的屏幕。

二、常用方案

1、flex布局

flex弹性布局可以对我们的网站进行快速布局，例如两栏布局、三栏布局、水平垂直居中等等，能解决绝大多情况下的响应式布局问题。

2、媒体查询

• 使用@media查询可以针对不同的屏幕尺寸设置不同的样式。
• 响应式开发设备屏幕尺寸划分，一般需要响应下面几个尺寸：
  

3、rem / em

• em和rem都是相对单位。
• em相对于父元素的字体大小计算。
• rem相对于根元素的字体大小计算，默认是16px。

4、vw / vh

vw / vh是视口单位，即根据浏览器的窗口大小进行适配。相对于视口的尺寸计算结果。

• vw：相对于视口的宽度，1vw等于视口宽度的1%（总视口宽度为100vw）。
• vh：相对于视口的高度，1vh等于视口高度的1%（总视口高度为100vh）。
• 和百分比是有区别的，百分比相对于父元素来说的，而vw和vh总是针对于视口来说的。