首页 > 代码库 > 如何用最简单的方法将PCweb改成适合各种设备的web
如何用最简单的方法将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:cover13 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。