CSS响应式

1、rem是什么 ？

rem是一个长度单位

• px：绝对长度单位， 最常用
• em：相对长度单位，相对于父元素，不常用
• rem: 相对长度单位，相对于根元素，常用于响应式布局

2、响应式布局的常见方案

• media-query: 根据不同的屏幕宽度设置根元素font-size
  • rem, 基于根元素的相对单位
• 使用vw/vh

3、rem的弊端

阶梯性， 需要根据不同机型尺寸设置不同的根font-size

4、网页视口尺寸

• window.screen.height: 屏幕高度
• window.innerHeight: 网页视口高度
• document.body.clientHeight： body高度

5、vw/vh

• vh网页视口高度的1/100
• vw网页视口宽度的1/100
• vmax取两者的最大值 ；vmin取两者的最小值