DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 使用CSS3的scale實現網頁整體縮放
使用CSS3的scale實現網頁整體縮放
編輯:JavaScript綜合知識     

 QQ郵箱的網頁整體縮放效果,原來實現方法如此簡單,下面有個實現示例,大家可以參考下

今天學習了一下QQ郵箱的網頁整體縮放效果,原來實現方法很簡單,代碼如下:   代碼如下: <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  <title>測試頁面</title>  <style type="text/css">  div {  width: 600px;  text-align: center;  font-size: 4em;  color: #333;  }  </style>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>  <script type="text/javascript">  $(function() {  var r = document.body.offsetWidth / window.screen.availWidth;  $(document.body).css("-webkit-transform","scale(" + r + ")");  });  $(window).resize(function() {  var r = document.body.offsetWidth / window.screen.availWidth;  $(document.body).css("-webkit-transform","scale(" + r + ")");  });  </script>  </head>  <body>  <div>改變窗口大小試試,你會發現什麼?</div>  </body>  </html> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved