4个像素
物理像素(设备像素--dp)：通常指设备的分辨率。物理像素是设备呈像的最小单位
---屏幕尺寸：屏幕对角线的长度。单位为：英寸
---屏幕分辨率：设备横纵方向上像素点的个数。单位：px
---屏幕像素密度(ppi)：每英寸所包含的像素个数
设备独立像素(逻辑像素--dip)
CSS像素(DIPs)：浏览器的最小单位
位图像素：当图片在页面中时，1个位图像素 = 1个CSS像素。位图像素是图像的最小单位
4个视口
---布局视口：为了解决将PC端的页面适配到移动端，将移动端的浏览器的可视区域设为viewport，布局视口决定布局，并且默认情况下它的宽度为980px
---视觉视口：浏览器可视区域，也就是可以人眼可以看见的区域。如果对视觉视口作放大操作，那么视觉视口中的CSS像素个数会减少，一个CSS像素的面积会放大，那么整个视觉视口就变小了
---理想视口：
<meta name="viewport" content="width=device-width">
布局视口的宽度 = 视觉视口的宽度 = 设备独立像素的宽度
---完美视口：
太大元素问题：当一个元素的宽度大于布局视口的宽度时，视觉视口会改变自己的宽度去包裹这个大元素，而不会出现横向滚动条
使用完美视口解决：当加上完美视口的方案后，视觉视口不会改变自己的宽度去包裹大元素，会出现横向滚动条
<meta name="viewport" content="width=device-width , initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
--width=device-width：布局视口的宽度 = 设备独立像素的宽度
--initial-scale=1.0：将布局视口与视觉视口的尺寸调整一致(initial-scale=1.0缩放是参照设备独立像素的)
注：
initial-scale=2.0：将布局视口与视觉视口中的CSS像素放大到原来的2倍，也就是说每一个CSS像素都会放大到原来的2倍，那么整个视口的CSS像素会减少，视口的也会随之变小
initial-scale=0.5：将布局视口与视觉视口中的CSS像素缩小到原来的0.5倍，也就是说每一个CSS像素都会缩小到原来的0.5倍，那么整个视口的CSS像素会增加，视口也会随之变大
user-scalable=no：禁止用户缩放操作
maximum-scale=1.0,minimum-scale=1.0：为了解决user-scalable=no的兼容性问题
width=device-width & initial-scale的矛盾
当布局视口与视觉视口的宽度不一致时，会选择两者中大的那个值作为视口的最终尺寸
2个操作
用户放大操作： 放大一个CSS像素的面积 页面变大 视觉视口变小 视觉视口内部所包含的css像素的个数变少
用户缩小操作：缩小一个CSS像素的面积 页面变小 视觉视口变大 视觉视口内部所包含的css像素的个数变多
系统放大操作：放大一个CSS像素的面积 页面变大 布局视口,视觉视口变小 视觉视口内部所包含的css像素的个数变少
系统缩小操作：缩小一个CSS像素的面积 页面变小 布局视口,视觉视口变大 视觉视口内部所包含的css像素的个数变多
1个比例
像素比(DPR)：一个方向上 相同设备所占据的物理像素的个数 / 一个方向上 相同设备所占据的设备独立像素的个数
物理像素与设备独立像素、CSS像素、位图像素的关系
---物理像素与设备独立像素： 一个方向上 相同设备所占据的物理像素的个数 / 一个方向上 相同设备所占据的css像素的个数 = 一个方向上 相同设备所占据的物理像素的个数 / 980
没加<meta name="viewport" content="width=device-width">，布局视口的宽度为980px
---物理像素与CSS像素：一个方向上 相同设备所占据的物理像素的个数 / 一个方向上 相同设备所占据的css像素的个数
加<meta name="viewport" content="width=device-width">，布局视口的宽度=设备独立像素的宽度，
可以通过 物理像素/设备独立像素=像素比的关系来判断物理像素与CSS像素的关系
如：像素比DPR=2；那么一个物理像素占多少个CSS像素？
横向上：一个物理像素占2个CSS像素
纵向上：一个物理像素占2个CSS像素
那么一个物理像素总共占4个CSS像素
---物理像素与位图像素：当一个位图像素对应上一个物理像素时 图片才可以完美清晰的展示
设备独立像素与CSS像素的关系
<meta name="viewport" content="width=device-width">
--width：布局视口的宽度
--device-width：设备独立像素的宽度
根据width = device-width这个等式可得，布局视口的CSS像素就等价于设备独立像素
CSS像素与位图像素的关系
1个位图像素 = 1个CSS像素
禁止用户缩放
user-scalable=no,maximum-scale=1.0,minimum-scale=1.0
网友评论