/*================================================================以下为基于ip5 宽度320做的适配，标准html{font-size:10px},即1rem = 10px=================================================================*/@mixin queryWidth($min, $max) {
     @if $min == -1 {    @media screen and (max-width: $max+px) {      html {        font-size: ( ($max+1) / 320 ) * 10px;      }    }  } @else if $max == -1 {
       @media screen and (min-width: $min+px) {      html {        font-size: ( $min / 320 ) * 10px;      }    }  } @else {
       @media screen and (min-width: $min+px) and (max-width: $max+px) {      html {        font-size: ( $min / 320 ) * 10px;      }    }  }}@media only screen and (orientation: landscape) {
     html {    font-size: 10px;  }}@include queryWidth(-1, 319);    // for iphone 4@include queryWidth(320, 359);   // for iphone 5@include queryWidth(360, 374);@include queryWidth(375, 383);   // for iphone 6@include queryWidth(384, 399);@include queryWidth(400, 413);@include queryWidth(414, -1);    // for iphone 6 plus

 

　　以上为基于320的设计稿，若要基于375，只需将mixin中320改为375即可。若要100px=1rem，只需将mixin中10改成100即可。当然，这只能实现大部分常规机型的适配，有些特殊机型还是需要自己再加上对应的适配。

　　接下来罗列一下我用到过的适配，希望得到各位帮助逐步完善。

@media screen and (min-width: 320px) {} //for iphone 5@media screen and (min-width: 375px) {} //for iphone 6@media screen and (min-width: 414px) {} //for iphone 6 plus@media screen and (min-aspect-ratio: 69/100) {} //for huawei荣耀6@media screen and (min-aspect-ratio: 7/10) {} //for mx3@media screen and (max-height: 480px) {} //for iphone 4@media screen and (max-height: 420px) {} //for iphone 4 微信@media only screen and (orientation: landscape) {} // for 横屏

 

个人博客：