移动端的适配

适配：在不同的尺寸移动设备上，页面相对性达到合理展示（自适应）或者保持统一效果的等比例缩放（看起来差不多）

适配的元素：
1.字体
2.宽高
3.间距
4.图像（图标，图片）

适配的方法：

1.百分比适配

2.viewport缩放

把所有机型的css像素设置成一致的
在head中写

  <script> 
            (function(){
                //获取当前设备css像素（viewport没有缩放）
                var curWidth=document.documentElement.clientWidth;
                // var curWidth=window.innerWidth;
                // var curWidth=window.screen.width;
                var targetWidth=375;
                var scale=curWidth/targetWidth;//缩放比
                // console.log( scale);
                
                var view=document.getElementById("view");
                view.content='maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=0 ,initial-scale='+scale;
                // console.log( view)

            })();
    </script>

3.Dpr缩放

把css像素缩放成与设备像素一样大的尺寸
在head中写

 <script> 
            (function(){
                var meta=document.querySelector('meta[name="viewport"');
                var scale=1/window.devicePixelRatio;
                if(!meta){
                    meta=document.createElement('meta');
                    meta.name="viewport";
                    meta.content='width=device-width,maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=0 ,initial-scale='+scale;
                    document.head.appendChild(meta);
                }else{
                    meta.setAttribute('content','width=device-width,maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=0 ,initial-scale='+scale);
                }

            })();
    </script>

4.rem适配（比较主流）

把所有设备都分成相同的若干份，再计算元素宽度所占份数
em：作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小。
问题：chrom下有最小字体限制 12px。
rem：css3新增的一个相对单位i，是相对于根元素（html）字体大小。
1.元素适配的宽度（元素所占的列数*1rem）
2.元素在设计稿里的宽度（量出来的需要除以相应的dpr）
3.列数（随便给的）
4.一列的宽度 （1rem=屏幕实际宽度（css像素）/列数）
5.元素实际占的列数（元素设计稿的宽/1rem）
如何设置html的font-size：
1.用js设置
1.1
head中

  <script> 
            (function(){
                var html=document.documentElement;
                var width=html.clientWidth;//设备css像素
                html.style.fontSize=width/16+'px';//把屏幕分成了16列，以iPhone5为例子得出一个列的值为整数。

            })();
    </script>





   div{
            /* 四个div显示在一行 */
            float:left;
            width:4rem;
            /* 每个div的宽度：320/4 =80px
                每个rem：320/16=20px
                需要多少个rem：80/20=4
            */
            height:4rem;
            background-color: #abc;
        }

1.2建议用这种

 <script> 
            (function(doc,win,designWidth){
                const html=doc.documentElement;
                const refreshRem=()=>{
                    const clientWidth=html.clientWidth;
                    if(clientWidth>=designWidth){
                        html.style.fontSize="100px";//给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去算。

                    }else{
                        //html.style.fontSize=16*clientWidth/375+'px';//以iphone6字体大小为16px为基准
                        html.style.fontSize=100*(clientWidth/designWidth)+'px';//==建议用这种==
                    }
                };
                doc.addEventListener('DOMContentLoaded',refreshRem);//dom加载完执行事件
            })(document,window,750);

    </script>






//如果用的/html.style.fontSize=16*clientWidth/375+'px';
//四个div显示在一行
  div{
            float:left;
            width:5.859375rem;
              /* 每个div的宽度：375/4 =93.75
                需要多少个rem：93.75/16=5.859375
            */
            height:4rem;
            background-color: #abc;
        }


//如果用的 html.style.fontSize=100*(clientWidth/designWidth)+'px';
 div{
            /* 四个div显示在一行 */
            float:left;
            width:1.875rem;
            /* 每个div的宽度：750/4 =187.5px
                
                需要多少个rem：187.5/100=1.875
            */
            height:1.875rem;
            background-color: #abc;
        }

2. 通过css3媒体查询设置字体大小（有人用，但是用的不多）

以苏宁易购为例：

    <style>
    html {
        font-size: 50px
    }

    body {
        font-size: 24px
    }
        @media screen and (min-width: 320px) {
    html {
        font-size:21.33px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size:24px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size:25px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size:25.6px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size:26.67px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size:27.6px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 424px) {
    html {
        font-size:28.27px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size:32px
    }

    body {
        font-size: 15.36px
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size:36px
    }

    body {
        font-size: 17.28px
    }
}

@media screen and (min-width: 720px) {
    html {
        font-size:48px
    }

    body {
        font-size: 23.04px
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size:50px
    }

    body {
        font-size: 24px
    }
}

    </style>

5.vw，vh适配（最新的）

      1.vw：1vw等于视口宽度的1%。

      2.vh：1vh等于视口高度的1%。

      3.vmin：选取vw和vh中最小的那个。

      4.vmax：选取vw和vh中最大的那个。

方案一：通篇用vw
方案二：通过vw设置根节点字体大小，页面里的尺寸依然使用rem（用的更多）

方案一：多少vw怎么算 设计稿尺寸/2/3.75
这样算很麻烦 用一个公式：
scss中：
@function vw($px){
@return $px/750*100vw;
}
例子：
div{
width:vw(250);
height:vw(250);
}

方案二：
例子：四个div排一列

  <style>
        *{
            margin:0;
            padding:0;
        }

        html{
            font-size: 13.333333333333334vw;
            /* 50px/3.75 */
        }
		body{
			font-size:12px; /* 避免受到html字体大小的影响 */
			}
    div{
        float:left;
        width:1.875rem;     750/4/100
        height:1.875rem;
        background-color:red;
    }
    }