第203题(2020-04-28)：响应式背后的浏览器原理你知道吗？（阿里）

[qappleh]

No description provided.

[qappleh]

1.我们先来说下响应式布局

响应式布局是指同一个网站在不同屏幕尺寸下显示不同的布局。它跟自适应不同，自适应是同一个网站在不同设备上自适应(比如自适应不同的Android和iPhone设备)。传统的做法会针对PC、移动端各做一套项目，而响应式会同时支持PC和H5。响应式方案：

• 媒体查询

• css媒体查询根据尺寸来定义不同样式，比如600/900/1200/1600

• 百分比

• rem

• rem是根据html的根元素来决定元素大小的，在自适应布局中应用非常广泛。

• 视窗(vw/vh)

• c3中新增视窗，1vw代表1%的宽度，通常结合rem一起使用。

Bootstrap/Antd/ElementUI中的栅格布局，本身也是一种响应式。

2.那么响应式背后的浏览器原理你知道吗？

根据浏览器或设备的分辨率可以计算获取到相应的尺寸，通过不同的尺寸可以动态的修改html元素或者盒子在浏览器中的大小，从而实现响应式。

原文链接：https://blog.csdn.net/frontend_frank/article/details/105803835