移动端的适配方案

Posted 2020-11-23 hhyf

目录

• 移动端的适配方案
  • 百分比适配
  • viewport缩放适配
  • DPR缩放适配
  • rem适配
  • hotcss适配(使用dpr+rem,简单好用)
  • vw/vh适配(为适配而生，最优方案)

移动端的适配方案

不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放

百分比适配

根据父级计算百分比，需要配合其他布局使用

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
html,body{
    width:100%;
    .container{
        width:100%;
        div{
            float:left;
            width:25%;
        }
    }
}

viewport缩放适配

把所有机型的css像素设置成一致的,需要动态设置
缩放比公式: 缩放比 = css像素/375

<script>
    (function(){
        //获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1)
        let pageWidth = document.documentElement.clientWidth;
        let pageWidth = window.innerWidth;
        let pageWidth = window.screen.width;
        //求缩放比
        var scale = pageWidth / 375 ;
        //动态设置缩放比
        给meta标签设置id,用来获取元素
        document.getElementById("metaId").content=`initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
        *注意,一定不要设置width=device-weidth,以及一定要设置最大最小缩放比

    })()
</script>

缺陷:大设备图片失真,缩放比为小数容易出现误差等.

DPR缩放适配

把CSS像素缩放成与设备像素一致的尺寸

和viewport适配类似(反推)，根据dpr的值，把视口缩放到和物理像素，也就是把css像素的值设置成物理像素，让所有设备都变成物理像素和css像素1:1的结果

公式:   dpr = 视口宽度/375

<script>
    (function(){
        //先要检查是否有这个标签，有则修改，无则创建
        var meta = document.querySelector("meta[name='viewport']");
        var scale = 1/window.devicePixelRatio;
        if(!meta){
           meta = document.createElement("meta");
           meta.name="viewport";
           mate.content=`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`
           document.head.appendChild(meta)
        }else{
            //修改
            meta.setAttribute('content',`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`)
        }


    })()
</script>

rem适配

rem的本质是计算元素占屏幕的百分比,单位rem需要设置到html标签上，代表屏幕每一列的宽度

设置rem的方式

• 使用javascript动态设置方法1

    <.script>
        (function(){
            var root = document.documentElement; //根元素html 
            var width = window.clientWidth;//设备的宽度
            root.style.fontSize = width/20+'px';     //20是指列，可随意设置，但一定要方便计算
  
        })()
    </.script>
    ______________________________________________________________
    切图流程:
        1.先设置rem
        2.量出元素在设计稿中的尺寸
        3.使用这个尺寸除以DPR(得看你使用的哪个设备做基准)
        4.然后换算成rem，这个rem值就是这个元素的值了
     元素在设计稿的尺寸/DPR/列  就是最终结果

• 使用javascript动态设置rem方法二（推荐,重点推荐其扩展方法）

    <script>
        //此方法对性能有优化
        (function(doc,window,designWidth){      //文档,window,设计稿尺寸
            const root = doc.documentElement;
            const refreshRem = () => {
                const clientWidth = root.clientWidth;
                if(clientWidth >= designWidth){
                    root.style.fontSize = '100px';
                    //给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去计算(第三个参数)
                }else{
                    root.style.fontSize = 16 * clientWidth / 375 +'px';
                    //这么写是为了以iphone6为基准,iphone6的clientwidth就是375
                    //设备比iphone6宽的rem就是1的xx倍，小的就是0.xx倍
                    //并且iphone6的dpr为2，也是人的眼睛能分辨的极限了（高清屏），超过了人眼其实已经分辨不出来和高清屏的区别了
  
  
                    //扩展方法: (重点推荐此方法)root.style.fontSize=100*(clientWidth/designWidth)+'px'
                    //这种后续不需要对dpr处理,因为cw/dw已经对dpr处理了
                    //此方法易于换算
                    //此方法即vh、vw的原理，可使用vh/vw适配
                }
            }
            doc.addEventListener('DOMContentLoaded',refreshRem)
        })(document,window,750) 
    </script>

• 使用媒体查询设置rem（了解）

    @media screen and (min-width:xxxpx){
        html{
            font-size:xxxpx
        }
    }

根据屏幕设备的区间(min-width)来设置font-size的值
ios9不支持ES6,要么使用es5写法，要么后续使用bable处理

hotcss适配(使用dpr+rem,简单好用)

其使用了dpr的原理和rem结合
开源项目地址:??直达

优点：直接使用在设计图中量出来的尺寸，无需进行计算转化,如元素量出来宽是187.5px,那么在scss/less文件中写为:

width:px2rem(187.5);

vw/vh适配(为适配而生，最优方案)

vw、vh是一个css单位(Viewport‘s Width,Viewport‘s Height)
vmin 取vwvh中最小的值
vmax 取vwvh中最大的值
横竖屏切换时，它们会互换
vw/vh是将屏幕宽高都分成100份，1vw为屏幕1%的宽度，1vh为屏幕1%的高度
优点：为适配而生，逮着就用，不需要转化
存在兼容性问题: ios>=8 android>=4.4

方案一：全页面使用vw
方案二: 通过vw设置根节点字体，然后使用rem适配，无需使用js