对响应式布局是怎么理解的#

一 响应式布局的概念#

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

二 常见的布局方式#

• 流式布局:也叫作百分比布局,将页面的宽度设置成百分比,根据窗口的宽度来进行伸缩
• 栅格系统:将一个页面划分为几个主要区域,定义这些区域的大小/位置/层次的关系
• 媒体查询@media:由媒体类型和一个或者多个检测条件表达式组成
• wiewport 适配将 px 转化为 rem 或者 vw,让页面使用

三优点#

面对不同的屏幕设备灵活性强

四 缺点#

• 兼容各种设备工作量大
• 代码累赘,会出现隐藏无用的元素,加载时间加长