移动端的适配方案

Posted hhyf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端的适配方案相关的知识,希望对你有一定的参考价值。

移动端的适配方案

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

百分比适配

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

<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

以上是关于移动端的适配方案的主要内容,如果未能解决你的问题,请参考以下文章

Vue 项目中的移动端适配方案

08-移动端开发教程-移动端适配方案

移动端页面适配方案及原理

移动端页面适配方案及原理

移动端适配方案

转:如何在Vue项目中使用vw实现移动端适配