移动端rem布局万能适配mixin

首发于微信公众号《前端成长记》，写于 2016.05.12

基于 640 宽的设计稿

/================================================================
以下为基于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

基于 750 宽的设计稿

只需将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 横屏

（完）

本文为原创文章，可能会更新知识点及修正错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验如果能给您带去些许帮助，欢迎 ⭐️star 或 ✏️ fork (转载请注明出处：https://chenjiahao.xyz)

ChenJiaH / blog

移动端rem布局万能适配mixin #12

基于 640 宽的设计稿

基于 750 宽的设计稿