对响应式布局的理解

响应式布局的概

同一页面在不同屏幕尺寸下有不同的布局，使一个网站、app能够兼容多个终端，最终目的其实也是为了适配

常见的响应式布局方式有哪些

1、流式布局,也叫百分比布局，将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩

2、栅格系统(Grid System)将一个页面划分为几个主要区域，定义这些区域的大小、位置、层次等关系

3、媒体查询@media，@media由媒体类型和一个或多个检测条件表达式组成

4、viewport适配将px转换为rem或者vw，让页面自适应了

优点

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题

缺点 

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素加载时间加长