实现响应式布局的方法

媒体查询

使用@media 媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

css3 中引入了一个新的单位 vw/vh，与视图窗口有关，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度。任意层级元素，在使用 vw 单位的情况下，1vw 都等于视图宽度的百分之一。

rem 单位是相对于字体大小的 html 元素，也称为根元素。默认情况下，html 元素的 font-size 为 16px。所以此时 1rem = 16px。

弹性布局只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。