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中较大的那个。