1.几个基本像素
物理像素（屏幕分辨率）
CSS像素
设备像素：设备独立像素，可以认为是计算机坐标系统中的一个点，代表一个程序使用的虚拟像素（eg:css像素），然后由相关系统转化为物理像素。
位图像素：1个位图像素占据1个物理像素，图片才能完美清晰的展示，否则失真。
2.像素比
=一个方向上占满一块屏幕需要的物理像素个数/一个方向上占满一块屏幕需要的设备独立像素个数
当写上meta标签后，width=device-width，使css像素与设备独立像素链接了起来，即css像素等同于设备独立像素
3.移动端视口
布局视口：控制整个移动端的布局
视觉视口：决定用户能看到的页面
理想视口
3.获取视口
Element.clientWidth表示元素内部的宽度，包括内边距但不包括垂直滚动条（布局视口）
window.innerWidth包括垂直滚动条（视觉视口）
window.screen.width 移动端返回理想视口，pc端返回分辨率
4.缩放
放大：1个css像素的面积变大，区域内css像素的个数变少，视觉视口的尺寸变小
在pc端 用户缩放影响视口的尺寸
在移动端，用户缩放影响视觉视口的尺寸，不会影响布局视口
系统缩放参照于理想视口进行缩放，改变布局视口和视觉视口
完美视口能处理太大的元素
<meta name="viewport"content="width=device-width，initial-scale=1.0 minimum-scale=1.0,maximun-scale=1.0,
user-scale=no,height=device-height,target-densitydpi=device-dpi"/>
