px：css pixels 逻辑像素，浏览器使用的抽象单位
dp：物理像素（设备无关像素），跟手机设备有关
dpr：设备像素缩放比，控制px和dp两者的关系
DPI：打印机每英寸可以喷的墨汁点
PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度
计算公式：1px = (dpr)^2 * dp
以iphone5为例子：（屏幕分辨率：1136 * 640，4英寸，dpr：2）
通过上述公式可计算得：320px * 568px（有些人不会算的，自己慢慢琢磨！）
关系图
如果还是不懂，可以直接通过浏览器的开发者模式观看。
手机模拟器
PPI（每英寸的像素密度）的计算：（以iphone5为例子）
计算公式
也可以知道PPI越高，屏幕越清晰，可视度越低，系统的默认缩放比（dpr）越大。
可以从电脑的设备分辨率知道（分辨率越大，图标显示越小；分辨率越小时，图标显示变大，同时屏幕清晰度降低）
为什么呢？？？ 因为：1px中等于更多的物理像素了！！！
拓展下:
Retina屏（高清屏）：dpr都是大于等于2
移动端开发基础 1.移动端浏览器主要是对webkit内核进行兼容2.开发的移动端主要是针对于手机端开发3.移动端开...
移动web开发流式布局 ====================== 1.0 移动端基础 1.1浏览器现状 PC端...
transform 3D效果: 移动端开发基础
2_移动端前端开发注意事项 移动端开发一般使用HTML5 3.移动端前端基础架构单词释义：a)mkdir: ma...
移动开发像素知识 px：css pixels 逻辑像素，浏览器使用的抽象单位 dp：物理像素（设备无关像素），跟手...
之前负责移动端基础架构相关的工作，并做了一段时间 ToB 的移动技术框架输出，所以对移动端的现状以及移动端开发这个...
1.移动端基础 #1.1.屏幕 移动端和pc端开发差异比较大的就是屏幕了，这里说的差异主要体现在移动端大屏幕碎片化...
写于头部maximum-scale=1.0：用户可以缩放的最大百分比 minimum-scale=1.0：用户可以...
一、移动web基础 京东双十一销售额 主流移动站点 移动端浏览器 案例《京东商城》 PC端的开发技术可以实现吗?不...
移动端开发新趋势Flutter移动端开发新趋势Flutter
本文标题：移动端开发基础
本文链接：https://www.haomeiwen.com/subject/dksusftx.html
网友评论