web app自适应方案rem

rem是CSS3新引进来的一个度量单位。支持Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+等浏览器。现在多在移动端上使用。

方案一：

css设置全局字体大小：

1
2
html{font-size: 100px; }
body{font-size: 0.14rem;}

jquery计算当前浏览器全局字体大小：

1
2
3
4
5
6
$(window).resize(function(){
    $('html').css({'font-size':$(window).width()/3.2+"px"});
});
$(function(){ 
    $('html').css({'font-size':$(window).width()/3.2+"px"});
});

在使用过程中，假设是640像素的设计，测量宽度是 20px,css中对应尺寸是 0.1rem。

方案二:

css部分：

1
2
3
4
5
6
html{
    font-size: 1rem;
}
body{
    font-size:0.24rem;
}

jquery部分：

1
2
3
4
5
6
7
8
9
10
11
12
$(window).resize(function(){
    setRem(640);
});
$(function(){
    setRem(640);
})
function setRem(maxWidth){
    var sw = $(window).width();
    var radio = sw/maxWidth>1?1:sw/maxWidth;
    var perSize = radio*100 + 'px';
    document.documentElement.style.fontSize=perSize;
}

640表示设计图纸宽度为640像素，在使用过程中，测量宽度是 20px ,css中对应尺寸是 0.2rem。