前端小白，最近一直在做相关移动端页面问题；针对移动设备分辨率问题总是有 些雾里看花的朦胧，刚才看了一下Markdown基本语法，索性应用一下，做个简单笔记，以备查阅复习；如有错误之处，希望大神路过不惜指正，感谢。
以下均为网络搜集资料，如有版权问题，请联系本小白删除。
首先，需要了解一些基本相关概念:
-
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
-
设备独立像素(density-independent pixel)](#id)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中 得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像 素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
-
设备像素比(device pixel ratio )
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
针对各个分辨率范围 在不同HTML文档设置不同font-size大小：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px)
html{font-size:11px}
@media screen and (min-width:376px) and (max-width:414px)
html{font-size:12px}
@media screen and (min-width:415px) and (max-width:639px)
html{font-size:15px}
@media screen and (min-width:640px) and (max-width:719px)
html{font-size:20px}
@media screen and (min-width:720px) and (max-width:749px)
html{font-size:22.5px}
@media screen and (min-width:750px) and (max-width:799px)
html{font-size:23.5px}
@media screen and (min-width:800px)```
>
最后 附上万恶美帝移动产品屏幕分辨率
>>
| 设备名称 | 分辨率 |
| :-------------: |:-------------:|
|iPhone4/iPhone4s| 640*960 |
|iPhone5/iPhone5s |640*1136 |
|iPhone6(7)s/iPhone6(7)s |750x1334 |
|iPhone6(7)P/iPhone6s P |1080x1920 |
|iPad 1 / 2,iPad mini | 1024 * 768 |
|iPad 3,4|2048 * 1536|
网友评论