一、像素
1.物理像素：
指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。
如：iphone6的分辨率为1334*750，即在水平方向上有750个发光点，在垂直方向上有1334个发光点。
不同的手机，它的屏幕分辩是不同的。在开发时，不关心物理像素。当然，物理像素越高，图像越清析。
2.逻辑像素：
在写CSS代码时，写的像素叫逻辑像素。
如：.box{width:100px,height:100px;}。在电脑端：1个逻辑像素等于1个物理像素。
但是在手机端就不一样了。
二、视口
1.如果把一个PC端的网站放到手机端，整体会被缩小，为什么？
答：把PC端的网站放到手机端，分两步：
1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。
如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。
如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条。
如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。
2）第二步，就是把这个虚拟容器放到手机里 。
如果手机的宽度也是980，正好把这个虚拟容器放下。
不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375，iphone5宽度是320，iphone6/7/8plus的宽度是414.... 安卓手机在出厂时，也规定死了一个宽度。
如果要把一个980的虚拟容器放到一个300 400 500左右的手机里，会怎么样？
答：此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。
上面的虚拟容器就叫视口。
2.为什么视口默认大小为980？
很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。 为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。
如：iphone6/7/8宽度是375。
iphone5宽度是320。
iphone6/7/8plus它的宽度是414。
上面的320px 、375px 、414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）。
在真实开发中，通常会以iphone6作为标准。
在开发时，我们就以手机宽度为主。
3.写一个盒子：
如：200*200盒子。
在PC端：逻辑像素和物理像素一一对应 。
在iphone6/7/8plus上：1)盒子先放到虚拟容器（980px）中 然后压缩放到414的手机中。
在iphone6/7/8上：1)盒子先放到虚拟容器（980px）中 然后压缩放到375的手机中。
在iphone5上：1)盒子先放到虚拟容器（980px）中 然后压缩放到320的手机中。
4.同一个盒子在不同的手机中，大小是不一样的。
问：同一个盒子在不同的手机中，显示的大小，取决于手机的分辨率，正确吗？ 答：不正确，取决于手机的宽度，这个宽度叫设备独立像素。
以iphone6为例：
分辨率是：1334*750。在水平方向上有750个发光点，在垂直方向上有1334个发光点。
设备独立像素：375*667。
就是水平方向来说：
分辨率：750，有750个发光点。
设备独立像素：375。
像素是一块一块：1*1的像素块。
结论：在iphone6上，1设备独立像素块，最终映射到手机的上，可以映射4个发光点。
5.如何不让盒子压缩?
答：为了不让盒子放到手里被压缩，可以设置这个虚拟容器的宽度。
如：200*200盒子。
人为设置虚拟容器是的宽度是414。 <meta name="viewport" content="width=414">
1）200*200的盒子放到414的盒子，肯定可以放下
2）414的虚拟容器放到414的手机中就不会压缩。
结论： 如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。
最终的结论： 只要我们去写手机端的页面，必须要设置视口大小。
例：可以使用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <!--设置视口的宽，缩放-->
<title>窗口</title>
<style type="text/css">
6.缩放
从技术上讲，缩放就是放大或者缩小css像素的过程。
典型的例子就是在手机上浏览pc端的网站，放大一点，好看清字。
但是，这个缩放会影响页面上的所有元素。
比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。
所以，缩放会影响视觉视口的尺寸。 放大会使视觉视口变的更小，看到的内容就越少，因为屏幕上显示的css像素更少了。 缩小则会使视觉视口变的更大，看到更多的部分。因为屏幕上css像素更多了。
所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。
7.视口的属性：
Width：设置视口的宽度，通常它的值就是device-width。
initial-scale ：设置页面的初始缩放值。
minimum-scale minimum：是最小值的意思，允许用户最小的缩放值，是一个数字，可以是小数，通常情况下是1。
maximum-scale maximum：是最大值的意思，允许用户最大的缩放值，是一个数字，可以是小数，通常情况下是1。
user-scalable ：是否允许用户两个手指去缩放。no表示不允许，yes表示允许。
height ：设置视口的高度。
可以只设置initial-scale， width=device-width等价于initial-scale=1.0。
视口 = 设置独立像素（375） / initial-scal。
8.设置视口有两种方式：
width
initial-scale
如果这两种方式都设置了，最终以视口大的为主。
9.不允许用户缩放，也有两种方式：
user-scalable=no
minimum-scale=1,maximum-scale=1
三、三个视口
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。
而移动端则较为复杂，它涉及到三个视口：布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。
1.布局视口：
桌面上，视口与浏览器窗口的宽度一致，但在手机上，视口与移动端浏览器屏幕宽度是不关联的。试想下，在小屏幕的移动端设备下，如果使视口与移动端浏览器屏幕宽度一致，那么占body的30%的div在手机上展示的宽度看起来非常非常小，因此移动端浏览器厂商必须保证即使在窄屏幕下元素显示的很好，因此需要将视口的宽度设计得比屏幕宽度宽出很多，这样网站会显示得可以想象成如桌面上的那样。但是，如果网站没有为移动端做优化，那么浏览器会尽可能的缩小网站让用户能看到网站的全貌。
总结： 在手机上，视口与屏幕宽度并无关联，这跟桌面上是相反的。我们称该视口为布局视口。
2.视觉视口：
它是用户正在看到的网站的区域，注意是网站的区域（重要的事情说三遍）。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
3.理想视口：
默认情况下，一个手机或平板浏览器的布局宽度为768-1024像素。这对于手机的窄屏来说并不理想。换句话说，布局视口 的默认宽度并不是一个理想的宽度。因此理想视口被引进了。
只有当网站是为手机准备的时候才应该使用理想视口。当要添加理想视口，需要在页面里添加meta视口标签，如：
<meta name="viewport" content=" width=device-width 宽度为理想视口宽度，
initial-scale=1, 初始缩放比
minimum-scale=1, 最小缩放比
maximum-scale=1, 最大缩放比
user-scalable=no 用户是否可以缩放 yes或no
">
这行代码是通知浏览器，布局视口的宽度应该与理想视口宽度一致。这也说明了定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。
