移动适配的几种方案/1像素问题

在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素。

而在移动端，由于retina视网膜屏幕的出现，逻辑像素和物理像素不再只是1:1，所以要适应不同尺寸的设备，需要比pc端多做适配方案。

1. 百分比+固定高度适配
   

   .box{
   overflow:hidden  //形成bfc，浮动参与计算
   }
   .item{
   height:40px;
   width:25%; 
   box-sizing:border-box;
   border:1px solid #09a;
   float:left
   }

   需要媒体查询设置字体大小
   水平也可以弹性布局
   
   
2. rem+媒体查询解决方案
   媒体查询根据不同屏幕宽度改变html字体大小。1rem就等于根元素的font-size大小，再使用rem自适应适配。
   

   @media screen and (min-320px){
   html{
   font-size:50px
   }
   }
   @media screen and (min-360px){
   html{
   font-size:56.25px
   }
   }
   @media screen and (min-400px){
   html{
   font-size:62.5px
   }
   }
   @media screen and (min-440px){
   html{
   font-size:68.75px
   }
   }
   @media screen and (min-480px){
   html{
   font-size:75px
   }
   }
   @media screen and (min-640px){
   html{
   font-size:100px
   }
   }

   rem取值：根据dpr大小动态改变 **dpr（devicePixelRatio）：设备像素比
   rem取值：假设设计图给出640px，让1rem=100px或者1px=1/10容易计算
   chrome浏览器font-size小于12px时，会被重置为12px
   毕竟媒体查询会形成间隙
   
   
3. 动态监听宽度计算rem

   document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';//设计稿640

   1像素场景：
   设计稿给出border是1px，那么当dpr是2的时候，逻辑的1px对应的就是物理的2倍，如此，设计稿并没有充分还原。
   解决：
   安卓和ios8以下不适用的方法：
   media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio

   .border { border: 1px solid #999 }
   @media screen and (-webkit-min-device-pixel-ratio: 2) {
       .border { border: 0.5px solid #999 }
   }
   @media screen and (-webkit-min-device-pixel-ratio: 3) {
       .border { border: 0.333333px solid #999 }
   }

   伪元素缩放的方法：

   .border {
               position: relative;
               width: 90vw;
               margin-top: 70px;
               margin-left: 5vw;
               margin-right: 5vw;
           }
               .border:before {
                   content: "";
                   box-sizing: border-box;
                   position: absolute;
                   width: 200%;
                   height: 200%;
                   left: 0;
                   top: 0;
                   border: 1px solid #ccc;
                   transform: scale(0.5, 0.5);
                   transform-origin: 0 0;
               }