移动端适配方案

不适配

• <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
  要设置 meta 标签，将 css像素 = 设备独立像素
• 针对不同的分辨率，要对设计稿中的位图像素，进行相应的缩小，得到我们应该写的px数。
  例如：
  分辨率为2的设备，设计稿中的位图像素是6px,那么我们写css标签的值时要写成3px
  分辨率为3的设备，设计稿中的位图像素是6px,那么我们写css标签的值时要写成2px
  【优化】
  可以采用媒体查询，动态设置某些属性
  例如背景图片的设置：

  .bg(@url){
        background-image: url("@{url}@2x.png");
        @media only screen and (-webkit-device-pixel-ratio: 3){
            background-image: url("@{url}@3x.png");
        }
      }
  

适配

viewport适配

目的：就是将设计稿的尺寸变成布局视口的尺寸（利用系统缩放，改变布局视口内css像素的数量，此时 物理像素 / css像素 = 1 ）

页面的css标签的px值就是设计稿的值
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">

<script>
    //目的: 将所有设备的布局视口 调整为设计图的尺寸!!!
    (function(){
        //设计图的尺寸
        var targetW = 750;
        //拿到布局视口/理想视口的尺寸
        var layoutW = document.documentElement.clientWidth;
        //缩放的比例
        var scale = layoutW/targetW;
        //拿到viewport标签
        var metaNode = document.querySelector("meta[name=viewport]");
        //破坏了完美视口
        metaNode.content = `initial-scale=${scale},user-scalable=no,minimum-scale=${scale},maximum-scale=${scale}`
    })()
</script>

优点：所量即所得
缺点：破坏了完美视口

rem适配

一般浏览器的字体大小为16px，1 font-size = 16px = 1 rem
所以 750px = 750 （屏幕宽度）/ 16 rem

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">

@rem  : 1rem 应该占据多少个位图像素

<style type="text/less">
	@rem:750/16rem;
	.box{
		width:12/@rem
	}
</style>

<script>
    //目的: 将所有设备的布局视口 调整为16rem
    //包括设计图 也以16rem来衡量
    (function(){
        var styleNode = document.createElement("style");
        var w = document.documentElement.clientWidth/16;
        styleNode.innerHTML = `html{font-size:${w}px!important}`;
        document.head.appendChild(styleNode)
    })()
</script>

优点：没有破坏完美视口
缺点：px 到 rem 的转换较复杂

1px

@media 这个方案，适用于 ：不适配和rem适配，由于 viewport 适配应用了系统缩放，破坏了完美视口，物理像素与css像素不存在比率关系了，所以不能用 @media 这个方案；但是viewport 适配，一般直接写1px。

1条border：

.one-px(@color){
     position: relative;
     &:after{
         content: "";
         display: block;
         width: 100%;
         height: 1px;
         background: @color;
         position: absolute;
         bottom: 0;
         
         transform: scaleY(.5);
         @media only screen and (-webkit-device-pixel-ratio: 3){
             transform: scaleY(.33333333);
         }
     }
 }
---------------------
.navs{
   .one-px(black);
    ... ...
    ... ...
}

4条border：

.setBorderAll{
     position: relative;
       &:after{
           content:" ";
           position:absolute;
           top: 0;
           left: 0;
           width: 200%;
           height: 200%;
           transform: scale(0.5);
           transform-origin: left top;
           box-sizing: border-box;
           border: 1px solid #E5E5E5;
           border-radius: 4px;
      }
    }