响应式之rem的使用方法

第一步：

　　监听屏幕事件，根据屏幕宽度重新调整html的font-size属性

<script type="text/javascript">
    function resize(){
        var w=document.body.clientWidth;
        document.querySelector("html").style.fontSize=w/10+'px';
    };
    document.body.onresize=resize;
    resize();
</script>

第二步：给需要的元素以rem为单位定义宽高：

.schools tr td.descBox *{
    font-size:0.31rem;
    line-height: 0.41rem;
}

有了这两步，rem就能正常使用了。

至于计算过程中的比例或者非线性算法，看自己需要而定了。

原理：rem是以html的font-size为基准，计算当前元素相关数据的。这一点远远优于之前的px和em

响应式之rem的使用方法

推荐阅读