移动端适配的基础知识 秒速五厘米 2021-09-18 07:58 348阅读 0赞 先上楼主的图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70][] 首先,咱们需要了解以下几个专有名词和单位 这里,我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先,先来看一下**物理像素**。 以iphone6为例,可知道: **分辨率**:1334pt x 750pt 指的是屏幕上垂直有1334个物理像素,水平有750个物理像素。 **屏幕尺寸**:4.7in 注意英寸是长度单位,不是面积单位。4.7英寸指的是屏幕对角线的长度,1英寸等于2.54cm。 **屏幕像素密度**:326ppi 指的是每英寸屏幕所拥有的像素数,在显示器中,dpi=ppi。dpi强调的是每英寸多少点。同时,**屏幕像素密度**=**分辨率**/**屏幕尺寸** **接着,我们来看一下其他的单位。** **设备独立像素**:设备独立像素,不同于设备像素(物理像素),它是虚拟化的。比如说css像素,我们常说的10px其实指的就是它。需要注意的是,**物理像素**开发者是无法获取的,它是自然存在的一种东西,该是多少就是多少。 **设备像素比**:缩写简称**dpr**,也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。**设备像素比** = **设备像素** / **css像素**(垂直方向或水平方向)。可以通过JS来获取:`window.devicePixelRatio` 链接:[demo项目][demo] 原文链接:[https://segmentfault.com/a/1190000011586301][https_segmentfault.com_a_1190000011586301] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70]: /images/20210812/2218ddfe9b0c47dc93b33eb641dd34d6.png [demo]: https://github.com/GuoYuFu123/vue-app-test [https_segmentfault.com_a_1190000011586301]: https://segmentfault.com/a/1190000011586301
还没有评论,来说两句吧...