卑鄙的泡面

8.10-8.14

本周开始做项目，其中有移动端的，看见其他组有使用rem的，

然后我就开始百度rem，搜到几篇好文章，跟大家分享一下，

web app变革之rem
web app 自适应方案总结 关键字 弹性布局之rem

以下代码，是在朋友所发案例中拷贝的

 

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        
</body>
</html>
<script>

        //auto adaptation
        var calculate_size = function () {
            var BASE_FONT_SIZE = 100;
    
            var docEl = document.documentElement,
                clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 320) + 'px';
        };
    
        // Abort if browser does not support addEventListener
        if (document.addEventListener) {
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            window.addEventListener(resizeEvt, calculate_size, false);
            document.addEventListener('DOMContentLoaded', calculate_size, false);
            calculate_size();
        }
    
</script>

　　

关于var BASE_FONT_SIZE = 100;
如下解释：
根元素的值可以任意的去定义，
但是建议最小定义20px以上，
还有定义的时候要考虑方便自己换算，
有些人定100px，
但是不要定义10px，
因为chrome不支持中文字体小于12px，
所以会导致当计算小于12px的时候，
会默认取12px去计算，导致中文版chrome的rem计算不准确。

 

posted on 2015-08-16 21:55  卑鄙的泡面  阅读(137)  评论(0)  编辑  收藏  举报

导航