美文网首页
media实现的rem为单位的响应式

media实现的rem为单位的响应式

作者: Rose_yang | 来源:发表于2019-08-15 15:31 被阅读0次
    @charset "UTF-8";
    
    @mixin queryWidth($min, $max) {
     @if $min == -1 {
       @media screen and (max-width: $max+px) {
         html {
           font-size: ( ($max+1) / 375 ) * 100px;
         }
       }
     } @else if $max == -1 {
       @media screen and (min-width: $min+px) {
         html {
           font-size: ( $min / 375 ) * 100px;
         }
       }
     } @else {
       @media screen and (min-width: $min+px) and (max-width: $max+px) {
         html {
           font-size: ( $min / 375 ) * 100px;
         }
       }
     }
    }
    
    @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
    
    

    相关文章

      网友评论

          本文标题:media实现的rem为单位的响应式

          本文链接:https://www.haomeiwen.com/subject/rplqjftx.html