rem适配的两种方案

rem适配方案


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

rem实际开发适配方案1

rem + 媒体查询 + less技术

1、 设计稿常见尺寸宽度

设备常见宽度
iphone45640px
iphone678750px
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和响应式布局的推荐看这篇文章 https://blog.csdn.net/w390058785/article/details/80223717



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
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值