HTML5项目实战（Web开发）

1. 像素理论：
   - 屏幕尺寸：单位英寸（1英寸=2.54厘米），对角线的长度
   - 屏幕分辨率：单位px（1px=1个像素点），纵向像素*横向物理像素来表示一个手机的分辨率。
   - 高清屏：具有足够高的物理像素密度，相同区域，高清屏的物理像素点数是普通屏的4倍
   - 像素密度：屏幕上每英寸可以显示的像素点的数量单位（ppi）
   - 物理像素（与屏幕分辨率有关，设备像素）和css像素（与浏览器有关，抽象的），pc端一个css像素占据一个物理像素，高清端一个css像素占据4个物理像素
   - 最小单位：物理像素是设备呈现的最小单位，css像素是浏览器中的最小单位(即web前端开发的最小单位)，位图像素是图像的最小单位
   - 设备独立像素：css像素和物理像素之间进行转换的关键
   - 位图像素：只有一个位图像素对应一个物理像素，图片才能清晰
   - 像素比：设备物理像素和设备独立像素的比例，假如物理像素/设备独立像素=2（个数比），则，1个设备独立像素=4倍物理像素（横向，纵向都有），即占满同一区域，一个方向上所占据的物理像素的个数/一个方向上所占据的设备独立像素（css像素）的个数
   - 当加上meta标签时，width=device-width，使得，css像素等同于设备独立像素。

2. 视口理论：单位css像素
   - 布局视口：将pc端的页面完整的呈现在移动端设备上，并且不会出现横向滚动条，决定网页的布局。在物理像素和css像素1:1的情况下，我们认为布局视口要比设备宽度（分辨率）大得多
   - 视觉视口：决定用户能看到的尺寸
   - 理想视口：独立设备上的所代表的值就是理想视口,当在页面中加入viewport的meta标签，理想视口才生效,
   - 获取视口的宽度：
   - 移动端：

//布局视口最重要
var layout=document.documentElement.clientWitdth;//布局视口 layout的宽度，不包括垂直滚动条，没有兼容性问题，
var visual=window.innerWidth;//视觉视口 包括垂直滚动条，visual的宽度，接近全部支持
var dream=screen.width;//理想视口，一半代表理想视口的宽度，一半代表设备的分辨率，有很大的兼容问题

2. 放大缩小:
   - 放大：一个css像素的面积变大，视觉时候内css像素的个数变少，视觉视口的尺寸变小
   - 缩小：一个css像素的面积变大，视觉视口内css像素的个数变多，视觉视口的尺寸变大