Web APP 之rem的使用

移动端web app的开发，之前开发直接使用px像素做单位，这样子做对于传统的PC端开发来说，个人比较习惯，但是对于移动端在来，有说逞强。最明显是切图效果与设计师想达到的效果有些差距，比如<header>标头<header>，如果以px为单位，对于不同的手机，显示都一个模样的，与设计的效果图有偏差。。扩展比较差，，，而如果使用rem,,则可以以效果图的比例来显示，同时，因为是基于根元素（root）html,使用只要设置好html的大小，那么其它的以rem为单位的元素都可以得到缩放（改变倍数）。。rem作为css3新增加的相对单位，所以PC端想使用的话要考虑ie早期版本，根元素html的设置要根据屏幕的宽度来动态生成，可以通告css3 mdia媒体查询来设置常用的几个值，比如

@media screen and (max-width: 320px) {

html{

　　font-size:10px;　

　　}

}

@media screen and (max-width: 416px) {

html{

　　font-size:25px;　

　　}

} 
等等
个人觉得通过js来动态设置html会更加精准；

比如：
<script>
    $(window).ready(function(){
        var resizeIndex=function(){
            var currentWidth=$(window).width();
            var box=$("html");
            var index=(currentWidth*100)/750;
            box.css("font-size",index);
        }
        resizeIndex();
        $(window).resize(function(){
            resizeIndex();
        });
    });
</script>
注意上面是引用了zepto.js（jq下也同样适用）

巴特西

Web APP 之rem的使用

最新文章

热门文章