如何用最简单的方法将PCweb改成适合各种设备的web

浏览数：47 / 时间：2015年06月09日

使web页面自适应设备大小

1）用一个<div>包围<body>的内容

2）该div属性的宽度设为100% (宽度设为100%后，页面会随着设备窗口大小自动改变)

3）高度：通过window.innerHeight获得设备高度在通过jQuery的css()动态改变元素

（如果没有设高度，则页面高度会随着内容高度的变化而变化）

 1 <style>
 2  *{
 3                 margin:0;
 4                 padding:0;
 5    }
 6  .knr{
 7                 margin:0 auto;
 8                 padding:0 auto;
 9                 width:100%;
10                
11                 background:url(‘./bg.jpg‘) no-repeat;
12                 background-size:cover
13 
14     }
15 </style>
16 <script src="jquery-1.11.1.min.js"></script>

 1 <body style="text-align: center;">
 2   <script>
 3     $(function(){
 4     var a=$(window).height();//通过jQuery获取设备，可以通过js获取设备高度：window.innerHeight
 5      $(‘.knr‘).css(‘height‘,window.innerHeight);//获取class为knr的对象，动态设置高度
 6      $(window).resize(function(){//但当前页窗口大小变化时，动态改变高度
 7      $(‘.knr‘).css(‘height‘,window.innerHeight);
 8     });
 9 
10 });     
11  </script>
12 <div class="knr">
13 <form method="post" action="dozhuce.php">
14 <span style="color:#336600;font-family:楷体;font-size:150%;">账　　号:</span>
15 <input type="text" name="fmuser" style="background:transparent;color:white" id="fmuser"/><br/><br/>
16 <span style="color:#336600;font-family:楷体;font-size:150%;">密　　码:</span>
17 <input type="password" name="fmpw" style="background:transparent;color:white" id="fmpw"/><br/><br/>
18 <input type="button" value="登入" style="background:transparent;color:white;" id="login"> <input type="button" value="注册" style="background:transparent;color:white;" id="getzhuce"><br/><br/>
19 <div id="result" style="color:red"></div>
20 </form>
21 </div>
22 </body>