如何用最简单的方法将PCweb改成适合各种设备的web
使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>
当然，使页面自适应设备大小的还可以通过响应式来实现。
响应式网页设计，就是检测用户不同的设备，不同的浏览器器尺寸，提供给用户不同的页面，让所有用户都能达到美观的效果。
