移动端适配的解决方案

雨点打透心脏的1/2处 2022-06-13 04:39 256阅读 0赞

原文参考链接：  
[https://github.com/amfe/article/issues/17][https_github.com_amfe_article_issues_17]

移动端适配的flexible解决方案：  
[https://github.com/amfe/lib-flexible][https_github.com_amfe_lib-flexible]

**基本概念：**

1、物理像素  
物理像素就是设备上的像素点。

2、设备独立像素  
这是一个虚拟像素，可以认为是计算机坐标系统中的一点。会根据相关的系统转换为物理像素。

3、设备像素比（dpr）  
设备像素比 ＝ 物理像素 / 设备独立像素

在JS中，可以通过window.devicePixelRatio获取到当前设备的dpi；在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio，-webkit-max-device-pixel-ratio进行媒体查询。

举个例子：

众所周知，iPhone6的设备宽度和高度为375pt \* 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt \* 1334pt。

4、CSS中的rem

rem就是相对于根元素html的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据 html 的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

**解决方案flexible的实质：**

> 动态改写meta标签  
> 给html元素添加data-dpr属性，并且动态改写data-dpr的值  
> 给html元素添加font-size属性，并且动态改写font-size的值

**另外，文本字号不建议使用rem**

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用\[data-dpr\]属性来区分不同dpr下的文本字号大小。

div {
        width: 1rem; 
        height: 0.4rem;
        font-size: 12px; // 默认写上dpr为1的fontSize
    }
    [data-dpr="2"] div {
        font-size: 24px;
    }
    [data-dpr="3"] div {
        font-size: 36px;
    }

[https_github.com_amfe_article_issues_17]: https://github.com/amfe/article/issues/17
[https_github.com_amfe_lib-flexible]: https://github.com/amfe/lib-flexible