1、<meta name="viewport" content="width=device-width,initial-scale=1">
- width=device-width：设置视口宽度等于屏幕宽度。
- initial-scale=1：设置初始缩放比。
- user-scalable=no：设置禁止缩放；配合maximum-scale=1, minimum-scale=1使用。
2、获取视口宽度
- 方法一：document.documentElement.clientWidth：获取的是文档的宽度。
- 方法二：document.documentElement.getBoundingClientRect().width：获取的是文档的宽度。
-
注意：一般在开发中文档宽度相当于视口宽度。
3、开发中常用的单位
- px：绝对单位。不会随着视口大小的变化而变化, 像素是一个固定的单位。
- %：相对单位。百分比是一个动态的单位, 会随着父元素宽高的变化而变化。
- em：相对单位。em是一个动态的单位, 会随着参考元素字体大小的变化而变化。
- rem：相对单位。rem是一个动态的单位, 会随着根元素字体大小的变化而变化，其它祖先元素的字体大小不会影响rem尺寸。
- vw/vh：相对单位（视口单位）。vw/vh是一个动态的单位, 会随着视口大小的变化而变化，系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一，w和vh永远都是以视口作为参考。
- vmax/vmin：vmin是 vw和vh中较小的那个；vmax是 vw和vh中较大的那个。
