视口

概念：视口（viewport）
在继续更多JavaScript属性之前，我们必须引入另一个概念：视口。元素是网页中最上面的块包含元素，视口的功能就是用来约束这个最上面的块包含元素。听起来可能有点模糊，举个例子：假设有个流式布局中的sidebar的宽度是 width:10% 。现在，当调整浏览器窗口的大小时，边栏整齐地增长或收缩。但这到底是怎么工作的呢？技术上，侧边栏的宽度为其父元素宽度的10%。这里父级元素是元素，此时元素没有设定宽度，因此问题变成了元素的宽度是如何有的。通常，所有的块级元素的宽度占其父节点宽度的100%（此处忽略特殊情况），因此，元素与其父对象元素一样宽。那么元素又有多宽呢？它与浏览器窗口一样宽。这就是为什么sidebar的宽度width:10%是整个浏览器窗口的10%。所有的Web开发人员都默认这个事实。但可能不知道理论上是怎样的。在理论中，元素的宽度受视口宽度的限制。元素占用视口宽度的100%。视口不受CSS影响，它不属于HTML结构，它的宽高由浏览器窗口决定。视口就是即将pc端网站放到移动端所需要的虚拟容器。那么如何将pc端的网站放入手机端：1、首先将pc端的网站包装在一个虚拟容器当中，这个虚拟容器的默认值为980px。如果网站的宽度大于该虚拟器的宽度，则会产生水平滚动条。2、将该虚拟容器放入手机，但是由于手机宽度固定切通常小于980px，故该虚拟容器被压缩。 需知虚拟器的宽度是指的逻辑像素，而物理像素即电脑or手机的发光点，也叫物理分辨率，在电脑端1逻辑像素=1物理像素。而手机宽度是指设备独立像素，该像素可以等于多个物理像素。比如iPhone6分辨率1334750 而它的独立像素375667 1独立像素=4发光点。 那么如何使得该虚拟容器不被压缩呐？那就是将该虚拟容器的大小设置的与手机宽度一样，这样就可以将其完整的放入手机中。