分享一個移動端rem佈局的適配mixin

/*================================================================
如下爲基於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 橫屏

 

我的博客：

https://chenjiahao.xyz