如何使用js调节页面大小让页面自动适应浏览器和屏幕的大小

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>Insert title here</title>
<script src="http://localhost/wechattest/public/jquery-3.0.0.js
"></script>
<script>
/* 屏幕大小 */
$(document).ready(function(){
var wi = $(window).width();
var hi = $(window).height();
$("#login11").css("width",wi);
$("#login11").css("height",hi);
$("#login").css("height",hi);
$("#login").css("width",wi);
$("#img").css("width",wi);
$("#img"),css("height",hi);
});
/* 点击时得到触发事件 */
function OnfocusFun(element,elementvalue)
{
    if(element.value==elementvalue)
    { 
        element.value="";
        element.style.color="#000";
        element.type="password";
    }
}
/* 离开时触发事件 */
function OnBlurFun(element,elementvalue)
{
    if(element.value==""||element.value.replace(/\s/g,"")=="")
    {
        element.value=elementvalue;
        element.style.color="#999";
        element.type="text";
    }
}function Funclick(){
var user = $("#username").val();
var password = $("#password").val();
if(user == ""){
alert("请输入用户名");
}else{
if(password == ""){
alert("请输入密码");
}else{
alert("ok");
}
}
}
</script>
<style>
*{margin:0;padding:0;}
body{width:100%;height:100%;}
</style>
</head>
<body>
<div id="login11" style="">
<div class="login" style="">
<!-- LOGO -->
<div class="login-LOGO" style="margin-top:25px;width:600px;">
<img src="LOGO.png" />
<p style="margin-left:300px;margin-top:-20px;font-size:20px;">汽车服务数据共享平台</p>
</div>
<!-- 背景 -->
<div class="login-image" style="margin-top:40px;">
<img src="背景图.png" id="img"/>
</div>
<!-- 用户登录 -->
<div class="login-user" style="position:absolute;width:348px;height:338px;margin-top:-410px;background:#fff;margin-left:870px;">
<h3 style="margin-left:20px;"><p style="font-szie:16px;color:#666666;font-family:微软雅黑;">云数聚登录入口</p></h3><div style="float:left;border:1px solid #B5B5B5;margin-top:20px;margin-left:20px;width:38px;height:32px;">
<img src="用户.png" style="margin-left:12px;margin-top:5px;"/>
</div>
<input type="text" name="username" id="username" onblur="OnBlurFun(this,'商户编码 ,手机号')"  onfocus="OnfocusFun(this,'商户编码,手机号')" style="border-color:#ffffff;width:266px;height:30px;margin-top:20px;"/><br/><div style="float:left;border:1px solid #B5B5B5;margin-top:20px;margin-left:20px;width:38px;height:32px;">
<img src="密码锁.png" style="margin-left:12px;margin-top:5px;"/>
</div>
<input type="password" name="password" id="password" onblur="OnBlurFun(this,'密码')" onfocus="OnfocusFun(this,'密码')" style="border-color:#ffffff;width:266px;height:30px;margin-top:20px;"/>
<br/><input type="checkbox" name="check" style="margin-left:20px;margin-top:24px;"><span style="color:#666666;font-size:12px;font-family:微软雅黑;">记住用户名</span>
<span style="font-size:12px;margin-left:180px;"><a href="#" style="text-decoration:none;color:#666666;font-family:微软雅黑;">忘记密码</a></span>
<br/>
<div style="margin-left:20px;margin-top:10px;width:308px;height:42px;color:#fff;font-size:20px;background:#e60012;letter-spacing:24px;text-align:center;line-height:40px;font-family:微软雅黑;cursor:pointer;" onclick="javascript:Funclick();">登录</div>
<div style="margin-top:40px;margin-left:10px;">
<img src="箭头.png" style="margin-left:257px;"/>
<p style="margin-top:-15px;margin-left:275px;"><a href="#" style="text-decoration:none;font-size:12px;color:#e60012;font-family:微软雅黑;">立即注册</a></p>
</div>
</div>
</div>
<div style="margin-top:-48px;text-align:center;color:#666666;font-size:12px;font-family:微软雅黑;">
<p>Copyright@ 2013-2015 www.51hyc.com All Rights Reserved</p>
<p>信息技术有限公司</p>
</div>
</div>
</body>
</html>
如代码我按照百度的加了<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
又加了$(document).ready(function(){
var wi = $(window).width();
var hi = $(window).height();
$("#login11").css("width",wi);
$("#login11").css("height",hi);
$("#login").css("height",hi);
$("#login").css("width",wi);
$("#img").css("width",wi);
$("#img"),css("height",hi);
});
但是还是不能用一直都做后端，公司突然让我开发前端，页面问题有点不知所措，还有就是我的页面在ie和火狐打开没问题，但是到了谷歌就有一部分垮了。

解决方案 »

  1.   

    1.布局自适应，大多用CSS就能完成。用JS，费力不讨好。
    2.页面在Chrome中有问题，是JS或CSS不兼容。
    总之，多学学CSS吧。
      

  2.   

    有；；引入bootstrap...
    http://www.bootcss.com/对着文档抄就可以不懂再问
      

  3.   

    用css3的media query就行了，不需要js。不过ie8-不支持。通过@media screen控制网站在移动端显示
      

  4.   

    Js肯定是可以实现楼主所要的功能，但是实现起来比较复杂，所以建议楼主换一种思路：使用CSS实现：
         CSS 的 @media screen 是可以实现自适应页面，或者干脆使用bootstrap。
    将过去用js实现的render代码，转义到CSS是一个趋势，例如：
        过去只能接事件的鼠标响应显示，现在可以通过CSS的伪类：:focus、::hover  等实现了。
      

  5.   

    思路，首先判断不同浏览器的宽度，然后获取dom的样式然后修改，一般都是用栅格布局 视口 百分比 或者rem来兼容