一个网页适应多种不同屏幕的移动wap开发

原理：以768（ipad：font-size=100px）为基准，通过控制html的fontSize，来改变各种屏幕的放大缩小倍数。

1.HTML

单位用rem，包括字体和所有长宽高单位都用rem,

下面这句非常重要，没有的话$(window).width()恒等于980px.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

css代码：

html{
font-size:100px;
}
*{margin:0;padding:0;}
.og-layauto{
width:auto;
margin:0 auto;
max-width:720px!important;
background: green;
}

2.js代码：

jQuery写法：

$(function(){
var winW = $(window).width();
$('html').css({'fontSize':100 - (720-winW)* 0.1389 + 'px'});
})

原生写法，增加了window.onresize = fn,如下所示：

window.onload = function(){
initSize();
window.onresize = function(){
throttle(initSize,100);
}
function initSize(){
var handleHtml = document.getElementById("html1");
var handle_windowW = window.innerWidth || document.documentElement.width || document.body.width;
if(handle_windowW > 720){
handle_windowW = 720;
}
handleHtml.style.fontSize = 100 - ( 720 - handle_windowW ) * 0.1389 + "px";
}
function throttle(fn,time,context){
clearTimeout(fn.t1);
fn.t1 = setTimeout(function () {
fn.call(context);
},time);
}
}