视口

   视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。
     移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄，因此，引入视口（虚拟容器）。
   视口的定义方式可以有以下两种 ：
    1：直接定义宽度
    <meta name="viewport" content="width=400">
    2：可自动获取移动设备宽度
     <meta name="viewport" content="width=device-width">
其中的像素又分为两种：
 1：物理像素：指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。
如：iphone6的分辨率1334*750 
在水平方向上有750个发光点，在垂直方向上有1334个发光点。
  2：逻辑像素：在写CSS代码时，写的像素叫逻辑像素，
 如.box{width:100px,height:100px;}
两种像素之间也存在一定的关系，即：在电脑端，一个逻辑像素等于一个物理像素。
其中视口可以分为：layout viewport(布局视口)，visual viewport(视觉视口)和ideal viewport(理想视口)。
   layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：document.documentElement.clientWidth | document.body.clientWidth；
   visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：window.innerWidth；
     ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：window.screen.width；
   1、在桌面浏览器上，浏览器窗口与视口的宽度一致，而视口（CSS标准文档中称为“初始包含块”）是CSS百分比宽度推算的根源，因此，浏览器窗口是约束CSS布局的视口；
2、在手机上，有两个视口，布局视口会限制CSS布局；视觉视口决定用户看到的网站内容；
3、移动端浏览器还有个理想视口，它是对特定设备上的特定浏览器的布局视口的一个理想尺寸；
4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。
    在移动端开发中，常将视口抽象划分为布局视口、视觉视口和理想视口。为什么这么划分呢？我觉得还是为了让我们更好理解CSS像素和设备像素的区别，也就是逻辑像素和物理像素的区别。在PC端开发书写CSS时，对元素的尺寸的限定单位经常就是PX，即像素大小。从一开始接触和学习过程中，一直都是使用PX，导致我们的思维产生定式，总觉得CSS中元素的大小的度量就只有PX了。
    另一个默认的思维定式就是在我们CSS代码中，CSS的PX像素单位就是真实的代表一个像素，导致当网页开发转到移动端开发时，一个新概念的出现对我们冲击特别大，很难转过弯来理解，比如现在要说的视口的理解，牵扯出来的CSS像素和设备像素的概念。
      其实，只要记住一点，CSS像素PX只是代表WEB网页中的一个度量单位，可以理解为同rem和em等单位一样，需要有一个参照尺寸才能确定其实际大小。比如rem参照根字节点的字体大小来确定自身大小，em参照父级元素字体大小来确定自身大小。思维定式中rem和em参照物是我们“绝对单位”像素PX而定的。