最近开始接触移动端开发相关知识，在这里做一些总结：
1.基本概念
屏幕尺寸 ： 对角线的长度 （厘米）
屏幕分辨率： 横纵向上物理像素的个数(物理像素)
屏幕密度： 每英寸上物理像素的个数
视口尺寸
代表的横纵向上css像素的个数（css像素）
2.4个像素 3个视口 2个操作 1个比例
4个像素：
物理像素
分辨率,是屏幕呈像的最小单位
一个物理像素占据的实际屏幕尺寸在不同设备上是否一样？
不一样
设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是不会变的
css像素
是web开发者使用的最小单位
一个css像素最终一定会转成物理像素去屏幕上呈像
一个css像素到底占据多少个物理像素和谁有关？
屏幕的特性 用户的缩放行为
不考虑用户缩放
没有viewport：
这块屏幕横向上占据了多少个物理像素（横向分辨率）
这块屏幕横向上占据了多少个css像素 （视觉视口的横向尺寸）
有viewport：
像素比
一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
考虑用户缩放
在屏幕的特性的基础上：
放大：css像素占据更多的物理像素
缩小：css像素占据更少的物理像素
设备独立像素
是设备对接css像素的接口，一旦css像素与独立像素挂上勾（width=device-width）
此时像素比才能发挥真正的作用
位图像素
图片的最小单位
位图像素与物理像素一比一时，图片才能完美清晰的展示
3个视口
布局视口
决定页面的布局
视觉视口
决定用户能看到什么
一个css像素到底占据多少个物理像素和视觉视口有极大的关系
一个视觉视口的实际尺寸是确定的（屏幕尺寸）
一个视觉视口包含的物理像素的个数是确定的（分辨率）
一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）
理想视口
设备独立像素所代表的值
2个操作
用户
只影响布局视口
系统（initial-scale）
影响布局视口和视觉视口
用<meta>标签中的initial-scale来改变的像素比，会影响CSS像素和物理像素之前对应的比例，视觉视口所包含的CSS像素个数也会
发生变化，即视觉视口会改变，因此会影响布局视口和视觉视口。
放大
放大一个css像素的面积,视觉视口的尺寸变小，一个css像素包含的物理像素的个数变多
缩小
缩小一个css像素的面积,视觉视口的尺寸变大，一个css像素包含的物理像素的个数变少
像素比
官方定义：
物理像素/设备独立像素
一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
3.3个意外
1.太大的元素
使用完美视口(有width=device-width和initial-scale=1.0)解决太大的元素超过视觉视口后不出滚动条的问题
2.width和initial-scale的冲突
谁大听谁的(谁设定的规则下，布局视口对应css像素大，就听谁的)
3.等比问题
没有viewport：
等比,页面展示太小，用户体验不好
有viewport：
不等比，每一个css像素在不同设备占据的实际屏幕尺寸一样。
每一个css像素在不同设备占据的物理像素的个数不一样（像素比）。
一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的
