移动端适配 meta viewport

由于移动端会自动缩放页面，所以我们需要加入meta标签，强迫页面不准缩放，进行一个1:1的显示，也就需要我们使用viewport。
使用方法：输入：meta:vp 按tap 出现

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//content="初始缩放比例，也即是当页面第一次 load 的时候缩放比例
（可以自己设置），用户不可手动缩放，初始缩放比例:1:1;最大、最小缩放比例：1：1"

---

一些设备默认的viewport的像素

viewport也有三种layout viewport、visual viewport、ideal viewport

• layout viewport :是浏览器设置的显示大小，由浏览器厂商决定，一般为980px;这个宽度可以使用document.documentElement.clientWidth来获取。
• visual viewport :浏览器可视区域的大小，一般layout viweport 都会大于浏览器可视区域。可以使用ducument.documentElement.innerWidth来获取。
• ideal viewport :是用户设置的大小，由标签<meta name="viewport">决定。移动设备默认的ideal viweport是layout viewport（content="width=device-width）
  例如： 页面原始宽度1000px ，layout viweport =980px;，visual viweprot=640px；
  这个时候，页面则会在640px的空间里面，缩放显示980px的内容。
  如果设置了ideal viweport=320px则会在640px的空间里，放大显示320px的内容。

---

CSS里面的1px并不一定是等于设备的1px。会根据缩放等变化

• 设备像素：
  对于pc来说，设备像素就是显示器的分辨率，是固定不变的。可以通过screen.width/height属性得到。
• css像素：
  当你对某个div块设置width:100px;设置背景颜色的时候，在浏览器中这个颜色的区域宽度就是100px的css像素。css像素大小可以通过浏览器的缩放进行调节

动态REM

什么是rem：专门，只适配手机的自适应方案。叫rem。
单位：
px：像素
rem：根元素像素（html）。根元素如果设置15px。则1rem就是15px;
em：1em等于自己的font-size的值。如果font-size是10，1em=10

动态REM：一切单位以宽度，就能完美还原设计！
REM依赖于=>html font-size=通过js设置=page width