阅读 1007

闲谈移动端布局适配方案

前言

针对现有手上项目的适配方案做的不是很满意(由于老项目就不多说了,都是泪😭)。又鉴于自已对移动端适配方案稍微有点了解,觉得一些方法挺有用的,有必要简单总结一下。当然这是个人理解,如有不妥,欢迎指正。

概念

物理像素:相当于屏幕分辨率。如:4.7寸iPhone是750*1334,这个所指的就是物理像素。

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

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

适配方案

方案一、媒体查询设置

首先引入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进行设置,稍微比较繁琐一点。

例子

方案二、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函数编译 ) //640px作为设计稿基准

$vm_base: 640; 
@function vm($px) {
    @return ($px / 640) * 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移动端适配总结
移动端适配总结
关于移动端适配,你必须要知道的

关注下面的标签,发现更多相似文章
评论