移动端布局三种视口_移动端布局：视口viewport的理解

移动端开发中，有一些基本概念需要理解清楚，才能更好的组织编程逻辑。在刚接触时，移动端视口的缩放和rem单位的缩放搞混淆了，弄得自己很蒙圈。所以仔细总结下自己的理解。

移动端的适配，我理解为两点：

第一点就是视口的缩放配置，牵扯出视口和像素等概念。目的是为让我们的CSS样式中逻辑像素匹配到手机终端的物理像素，让网页视图适合手机屏幕。虽然在代码中只是一个语句就解决的问题，但要理解它，要弄懂很多概念。《关于像素Pixel历史的详解看下一篇文档》

第二点就是rem单位的使用，目的是为了我们只需要一份代码就可以适应大部分不同屏幕的手机。

以上两点虽然实现的目的不同，但采用的方法原理基本一样，都用到缩放因子来解决问题。第一种是DPR，第二种是rem。

自适应：指在同一终端下，页面布局能根据视口本身变化而自动调节布局，比如PC端浏览器页面尺寸的变化，resize事件；

响应式：指页面能在根据检测到的不同终端类型，自动调整布局。比如手机、平板、电脑等不同终端下的响应。媒体查询@media的语法，要熟悉。

一、视口

视口，从字面上用常规思维可以理解为人眼的可视区域。在移动端开发中，常将视口抽象划分为布局视口、视觉视口和理想视口。为什么这么划分呢？我觉得还是为了让我们更好理解CSS像素和设备像素的区别，也就是逻辑像素和物理像素的区别。

在PC端开发书写CSS时，对元素的尺寸的限定单位经常就是PX，即像素大小。从一开始接触和学习过程中，一直都是使用PX，导致我们的思维产生定式，总觉得CSS中元素的大小的度量就只有PX了。

另一个默认的思维定式就是在我们CSS代码中，CSS的PX像素单位就是真实的代表一个像素，导致当网页开发转到移动端开发时，一个新概念的出现对我们冲击特别大，很难转过弯来理解，比如现在要说的视口的理解，牵扯出来的CSS像素和设备像素的概念。

其时，只要记住一点，CSS像素PX只是代表WEB网页中的一个度量单位，可以理解为同rem和em等单位一样，需要有一个参照尺寸才能确定其实际大小。比如rem参照根字节点的字体大小来确定自身大小，em参照父级元素字体大小来确定自身大小。思维定式中rem和em参照物是我们“绝对单位”像素PX而定的。

像素PX大小其时是相对显示硬件中的发光点(Dot)定义的，一个发光点常称为一个物理像素。

关于像素Pixel的前世经生，可以看这里