rem适配方案



作用：
让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

rem实际开发适配方案1

rem + 媒体查询 + less技术

1、 设计稿常见尺寸宽度

设备

常见宽度

iphone45

640px

iphone678

750px

Android

常见320px、360px、375px、384px、400px、414px、500px、720px、750px

大部分4.7~5寸的安卓设备为720px


2、动态设置html标签font-size大小

下面这个是针对750设计稿的，静态的

<style>
        html { font-size:100px; font-family:'微软雅黑','苹方','思源黑体';  }  /*效果图750px*/
           
        @media(min-width:319px){ html { font-size:42.67px; } }    /*i5宽度*/
        @media(min-width:359px){ html { font-size:48px; } }     /*Android常用宽度*/
        @media(min-width:374px){ html { font-size:50px; } }     /*i6,i7宽度*/
        @media(min-width:413px){ html { font-size:55.2px; } }   /*i6Plus,i7Plus宽度*/
        @media(min-width:444px){ html { font-size:60px; } }
        @media(min-width:479px){ html { font-size:64px; } }     /*Android常用宽度*/
        @media(min-width:539px){ html { font-size:72px; } }     /*Android常用宽度*/
        @media(min-width:599px){ html { font-size:80px; } }     /*Android常用宽度*/
        @media(min-width:639px){ html { font-size:85.33px; } }  /*Android常用宽度*/
        @media(min-width:699px){ html { font-size:93.2px; } }  /*Android常用宽度*/
        @media(min-width:749px){ html { font-size:100px; } .header1 {max-width: 7.5rem;}}		/*i5宽度*/      
  </style>

这个是动态的，根据你的屏幕来设置html的font-size值

<script type="text/javascript">
        (function(doc,win){
            var doc = doc.documentElement;
            doc.addEventListener('DOMContentLoaded', Resize, false);
            // 当DOM加载后执行
            win.addEventListener('resize', Resize, false);
            // 当屏幕发生变化时执行
            function Resize(){
                doc.style.fontSize=doc.clientWidth/750*100 +'px';  //这边是750的设计稿，如果是640的，把750改成640就好了
                //console.log(doc.style.fontSize);
            }
        })(document,window)
    </script>

假设设计稿是750px
假设我们把整个屏幕划分为10等份
每一份作为html字体大小，这里就是75px ,font-size:75px
也就是说1rem = 75px
在750的设计稿中，如果你的图片是200px，那你要转换成rem，就是200px/75 = 2.666rem
想详细了解rem和响应式布局的推荐看这篇文章

rem实际开发适配方案2

rem + flexible.js

  1. 手机淘宝团队出的简洁高效移动端适配库
  2. 不需要写不同屏幕的媒体查询，因为里面js做了处理
  3. 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的
  4. 我们要做的，就是确定好我们当前设备的html文字大小就可以了
  5. 比如当前设计稿是750px，那么我们只需要把html大小设置为75px（750px/10）就可以
  6. 里面页面元素rem值：页面元素的px值 / 75
  7. 剩余的，让flexible.js去算
  8. 详情看这篇文章 https://github.com/amfe/article/issues/17
  9. ps：在vscode上安装cssrem的时候记得 设置 -> settings.json -> 搜索cssroot ->左边有个🖊点击复制到设置->修改cssrem.rootFontSize为75px