六，前端---viewport

移动设备上的viewport就是设备的屏幕上能用来显示咱们的网页的那一块区域，再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域小。

这里须要注意三点：

（1）：浏览器的默认的viewport叫作layout viewport，这个宽度能够经过document.documentElement.clientWidth来获取。

（2）：然而layout viewport的宽度是大于浏览器的可视区域的宽度的，因此咱们还须要一个viewport来表明浏览器可视区域的大小，咱们叫它visual viewport。visual viewport的宽度能够经过window.innerWidth来获取。

（3）：目前愈来愈多的网站都会为移动设备进行单独设计，因此必须有一个可以完美适配移动设备的viewport，这就须要第三个viewport---移动设备的理想viewport（ideal viewport）。

总结：ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度，也就是宽度为100%的效果。

利用meta标签对viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width表示此宽度不依赖于原始像素（px），而依赖于屏幕宽度。全部浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iPhone和iPad上，不管是竖屏仍是横屏，宽度都是竖屏时ideal viewport的宽度。

注：

rem是css3新增的一个相对单位，也是em的升级版，由于rem相对的只是html根元素，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。