闲谈移动端布局适配方案

前言

针对现有手上项目的适配方案作的不是很满意（因为老项目就很少说了，都是泪😭）。又鉴于自已对移动端适配方案稍微有点了解，以为一些方法挺有用的，有必要简单总结一下。固然这是我的理解，若有不妥，欢迎指正。

概念

物理像素：至关于屏幕分辨率。如：4.7寸iPhone是750*1334，这个所指的就是物理像素。

设备独立像素：此为逻辑像素，计算机设备中的一个点，css中设置的像素指的就是该像素。老早在没有 retina 屏以前，设备独立像素与物理像素是相等的。如：4.7寸iPhone是375*667，这个所指的就是设备独立像素。

设备像素比：设备像素比(dpr) = 物理像素/设备独立像素。如：4.7寸的iPhone设备像素比是2。

适配方案

方案1、媒体查询设置

首先引入meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
复制代码

而后全局引入css

html{
    font-size: 16px;
}

@media only screen and (max-width: 414px){
 html{
        font-size: 64px;
    }
}
@media only screen and (max-width: 375px){
    html{
        font-size: 58px;
    }
}
@media only screen and (max-width: 360px){
    html{
        font-size: 56px;
    }
}
@media only screen and (max-width: 320px){
    html{
        font-size: 50px;
    }
}
复制代码

最后针对每一个页面进行采用媒体查询 (因为meta标签scale =1，此时对于移动端而言，css的像素单位px的参照物是设备独立像素) 适配，当屏幕大于414px统一采用px单位，小于414px采用rem单位。

优势：rem单位的使用和媒体查询配合可以达到pc端和移动端布局的响应式。

缺点：因为经过css手动设置fontsize，在显示细节方面不免没有那么统一,并且须要对不一样移动设备的不一样min-widh进行设置，稍微比较繁琐一点。

例子

方案2、js动态计算宽度

经过js计算fontsize。

function setHtmlFontSize(baseFontSize) {
        
        const _baseFontSize = baseFontSize || 75;//设计htmlfotnszie
        const ua = navigator.userAgent;
        const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
        const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
        let dpr = window.devicePixelRatio || 1;
        if (!isIos && !(matches && matches[1] > 534)) {
            // 若是非iOS, 非Android4.3以上, dpr设为1;
            dpr = 1;
        }
        const scale = 1 / dpr;//设备像素比
        let metaEl = document.querySelector('meta[name="viewport"]');
        if (!metaEl) {
            metaEl = document.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            window.document.head.appendChild(metaEl);
        }
        metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

        document.documentElement.style.fontSize = document.documentElement.clientWidth / (750 / _baseFontSize) + 'px';
    };
复制代码

此时由于scale的缩放比，css的像素单位px再也不是以设备独立像素为参照物，而是物理像素。

优势：可以很好的适配移动端,同时也解决了1px像素问题。

例子

若要同时适配pc端，则将scale默认设置为1，不须要根据设备像素比进行缩放。这时和方案一相比，只不过是在设置font-size时是动态计算，其余步骤就同样了。

方案三：视口单位适配

vw+vh单位已被大多设备所兼容，是时下最流行的适配方案之一。

以vw做为布局单位，方法以下。（使用sass函数编译 ） //750px做为设计稿基准

$vm_base: 750; 
@function vm($px) {
    @return ($px / 750) * 100vw;
}

//经过代码，假如设计稿中元素的宽度是 40px ，那么就能够在样式中写
.test{
    width:vm(40)
}
复制代码

附加：

字体适配

长文本字体建议依然采用px而不是rem，这样能够在一个固定的屏幕内展现更多内容。

1px像素问题

除了设置viewprot方法以外，还能够经过transform设置。 如：

.border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

复制代码

感谢如下文章:
H5移动端适配总结
移动端适配总结
关于移动端适配，你必需要知道的