5.百分比

• 主要通过查询设备的宽度来执行不同的css代码，最终达到界面的配置
• 优点：方法简单，成本低，图片便于修改，只需修改css文件，调整屏幕宽度时不需要刷新页面即可响应式展示
• 缺点：代码量比较大，维护不方便，为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源，为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

flex弹性布局 viewport是固定的：高度定死，宽度自适应，元素采用px做单位，随着屏幕宽度变化，页面也会跟随着变化，效果和PC页面的流体布局差不多。

• 实现原理：根据rem将页面放大dpr倍，然后viewport设置为1/dpr
• rem实现：rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数，根据屏幕宽度设置html标签的font-size,在布局时使用rem单位布局，达到自适应的目的。

• 视口是浏览器中用于呈现网页的区域
  • vw:1vw等于视口宽度的1%
  • vh: 1vh等于视口高度的1%
  • vmin: 选取vw和vh中最小的那个
  • vmax: 选取vw和vh中最大的那个

  虽然vw能更优雅的适配，但是还是有点小问题，就是宽，高没法限制

• 使用百分比定义宽度，高度用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小
• 原理简单，不存在兼容性问题