挪动端适配

2024年2月23日 152次阅读 来源: Alan

媒介：这周事情碰到了挪动端1px的题目。之前一直写款式也没有迥殊注意着一点。另有就是rem的道理。这些实在就是比较罕见的挪动端适配题目。现阶段比较主流的适配计划有二种。一种是
flexible + rem,另一种是
vw

下面我们来看一下详细状况

1、基本观点

在相识详细计划道理前，我们先来看一下一些基本观点：

1.1、物理像素(physical pixel)

物理像素又被称为装备像素，他是显现装备中一个最细小的物理部件。每一个像素能够依据操作体系设置本身的色彩和亮度。

1.2、装备自力像素(density-independent pixel)

装备自力像素也称为密度无关像素，能够认为是盘算机坐标体系中的一个点，这个点代表一个能够由顺序运用的假造像素(比如说CSS像素)，然后由相干体系转换为物理像素。（老早在没有 retina 屏之前，装备自力像素与物理像素是相称的）

1.3、CSS像素

CSS像素是一个抽像的单元，重要运用在浏览器上，用来准确器量Web页面上的内容。平常状况之下，CSS像素称为与装备无关的像素(device-independent pixel)，简称DIPs。

1.4、装备像素比(device pixel ratio)

装备像素比简称为dpr，其定义了物理像素和装备自力像素的对应关联。它的值能够按下面的公式盘算获得：

装备像素比 ＝ 物理像素 / 装备自力像素

在JavaScript中，能够经由过程window.devicePixelRatio获取到当前装备的dpr。而在CSS中，能够经由过程-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio举行媒体查询，对差别dpr的装备，做一些款式适配(这里只针对webkit内核的浏览器和webview)
因此在iphone 6、7、8 的 dpr 为 2的装备中，一个装备自力像素便为 4 个物理像素，因此在 css 上设置的 1px 在其屏幕上占有的是 2个物理像素，0.5px 对应的才是其所能展现的最小单元。

1.5、rem

简朴的明白，rem就是相关于根元素<html>的font-size来做盘算。而我们的计划中运用rem单元，是能随意马虎的依据<html>的ont-size盘算出元素的盒模子大小。而这个特征对我们来说是迥殊的有好处。

2、flexible完成计划

相识了前面一些相干观点以后，接下来我们来看现实处理计划。淘宝有一个名叫lib-flexible的库，而这个库就是用来处理H5页面终端适配的。
我们把屏幕分红10平分，那末

  • 物理像素为 750 = 375 * 2，那末 10rem = 750px，1rem = 75px;
  • 物理像素为 1125 = 375 * 3，那末 10rem = 1125px，1rem = 112.5px ;
  • 物理像素为 1242 = 414 * 3, 那末 10rem = 1242px，1rem = 124.2px;
function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

2.1、1px的物理像素的处理计划

由此我们获得一个1px像素的处理计划。viewport 的 initial-scale 具有缩放页面的结果。关于 dpr=2 的屏幕，1px紧缩一半便可与1px的装备像素比婚配，这就能够经由过程将缩放比 initial-scale 设置为 0.5=1/2 而完成。以此类推 dpr=3的屏幕能够将 initial-scale设置为 0.33=1/3 来完成。

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

3、视口单元适配计划

将视口宽度 window.innerWidth 和视口高度 window.innerHeight 平分为 100 份，且将这里的视口明白成 idealviewport 更加贴切，并不会跟着 viewport 的差别设置而转变。

1、vw : 1vw 为视口宽度的 1%
2、vh : 1vh 为视口高度的 1%
3、vmin : vw 和 vh 中的较小值
4、vmax : 拔取 vw 和 vh 中的较大值

假如设想稿为 750px，那末 1vw = 7.5px，100vw = 750px。实在设想稿按照设么都没多大关联，终究转化过来的都是相对单元，上面讲的 rem 也是对它的模仿。

跟之前一样的痛点，我们依然须要消费大批不必要的盘算时候去把标注图中的px转换为vw，有无相似于postcss-px2rem的东西呢？很荣幸能再次站在伟人的肩膀上，已经有大神写了了相似的PostCss插件
postcss-px-to-viewport

参看材料
https://www.w3cplus.com/mobil…

    原文作者：Alan
    原文地址: https://segmentfault.com/a/1190000018576842
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞