像素和视口在PC端和手机端的相关区别和联系

关于手机端与PC端像素以及视口的相关问题

像素

 像素分为物理像素和逻辑像素
 物理像素：
	 即手机或电脑等显示设备屏幕的发光点，一个发光点对应一个物理像素
	 例如：电脑屏幕的分辨率为1920*1080，即此屏幕上有1920（水平）*1080（竖直）个物理发光点。
 	 在前端的开发中，一般不关注物理像素。
 逻辑像素：
 	即在编写CSS代码时，调整长度和宽度时所用到的px，又称为CSS像素

视口

视口是与设备相关的一个矩形区域（一个盒子），以“像素”作为单位。
视口是一个虚拟容器，前端的页面就装入在这个虚拟容器中。
 	把PC端的网站放到虚拟容器中，虚拟容器的宽度的980px，980px是PC端虚拟容器宽度的默认值。
 	如果网站的内容宽度等于980px，就会正好放入这个虚拟容器中。
 	如果网站的内容宽度大于980px，网站在虚拟容器中就会产生一个水平的滚动条。
 	如果网站的内容宽度小于980px，虚拟容器一样可以放下。
 	手机端的虚拟容器宽度比PC端小，因为手机是竖屏浏览。
 	iPhone6的手机宽度是375，在手机出厂时，手机的宽度是被设置好的。
 	手机宽度的单位也是px，但指的是设备独立像素，和手机的物理分辨率不是同一个东西。
 	在电脑端，一个逻辑像素等于一个物理像素。在手机端，因为手机宽度的不同，情况也不同。
 	同一个盒子，在不同的手机中，显示的大小取决于手机的宽度，即设备独立像素。
在PC端和手机端，虚拟容器的宽度并不相同，如果将一个PC端的网站放入到手机端，则页面会整体缩小。
	PC端的网页首先会放到PC端的虚拟容器中，然后再将此虚拟容器放入手机端的虚拟容器中。
	因为手机宽度小于PC端虚拟容器宽度，此时这个虚拟容器就会被压缩，遂带着容器中的内容也等比例压缩。
	如果手机宽度和PC虚拟容器宽度一样大，那将正好放下PC端的虚拟容器。
	例子：
		以iphone6为例：
		手机的物理分辨率是：1334*750   在水平方向上有750个发光点，在垂直方向上有1334个发光点。
		手机的宽度，即设备独立像素：375*667
		在水平方向来说：
    	分辨率：750   有750个发光点
    	设备独立像素：375    
		像素是一块一块：1*1的像素块
		结论：在iphone6上，1设备独立像素块，最终映射到手机的上，可以映射4个发光点。