美文网首页
根据手机屏幕大小适配rem

根据手机屏幕大小适配rem

作者: 开车去环游世界 | 来源:发表于2017-09-24 15:30 被阅读43次
const getFontSize = () => {
    let doc = document, win = window;
    let docEl = doc.documentElement;
    let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    let recalc = () => {
        let clientWidth = docEl.clientWidth;
        if( !clientWidth ) return;
        //如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px
        if( clientWidth > 750 ) {
            clientWidth = 750;
        }
        //设置根元素font-size大小
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
    //屏幕大小改变,或者横竖屏切换时,触发函数
    win.addEventListener( resizeEvt, recalc, false );
    //文档加载完成时,触发函数
    doc.addEventListener( 'DOMContentLoaded', recalc, false );
}
//使用方式很简单,比如效果图上,有张图片。宽高都是100px;
//样式写法就是
img{
    width:1rem;
    height:1rem;
}
//这样的设置,比如在屏幕宽度大于等于750px设备上,1rem=100px;图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度:375)上,375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;

相关文章

  • 根据手机屏幕大小适配rem

  • 2018-06-01

    rem Rem实现响应适配时,只要将转rem的px与初始屏幕宽度(即根据屏幕宽度变化的根元素字体大小)关系对应好,...

  • html----rem结合vw布局

    1.rem rem是相对于根元素的字体大小的单位 rem能等比例适配所有的屏幕,根据html的字体的大小来控制re...

  • 了解真实的『REM』手机屏幕适配

    了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...

  • rem 手机屏幕适配

    手机端屏幕适配解决方案(含屏幕旋转): danhuan 阅读笔记 2018.04.02文章:https://m...

  • rem.js

    //设置跟元素字体大小,配合rem做屏幕适配 ``` ( function(doc,win){ l...

  • 全局配置UIFont

    全局修改UIFont,根据屏幕适配字体大小

  • iOS字体大小适配的几种方法

    方法一:用宏定义适配字体大小(根据屏幕尺寸判断) //宏定义 方法二:用宏定义适配字体大小(根据屏幕尺寸判断) 1...

  • Less for 循环

    循环设定body和html的字体大小,让移动端可根据rem进行适配。

  • 微信小游戏屏幕适配

    作者: 何永峰;标签: 屏幕适配 屏幕适配 适配都是老生常谈,移动端要根据手机屏幕适配,PC端也有时候根据不同的...

网友评论

      本文标题:根据手机屏幕大小适配rem

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