说说rem

作者: f275edb871f8 | 来源:发表于2016-02-14 15:50 被阅读188次

    rem单位是在移动端布局中最常使用的单位
    通常做法是设置html{font-size:62.5%},然后使用媒体查询去改变不同尺寸设备的font-size值。
    这样做的不足之处:每个文件都需要引用一大串的font-size值很繁琐,另外值并不能达到连续变化的效果。

    这个时候可以引入一段js,通过识别设备尺寸来动态改变font-size值

    var currClientWidth,fontValue,originWidth;
    //originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿)
    originWidth=375;
    __resize();
    //注册 resize事件
    window.addEventListener('resize', __resize, false);
    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        //这里是设置屏幕的最大和最小值时候给一个默认值
        if (currClientWidth>640){currClientWidth = 640};
        if (currClientWidth<320){currClientWidth = 320};
        fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
    

    相关文章

      网友评论

          本文标题:说说rem

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