国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

使用CSS3的scale實現網頁整體縮放

2019-11-20 20:56:01
字體:
來源:轉載
供稿:網友
今天學習了一下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>
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 正阳县| 丰顺县| 彩票| 资阳市| 慈利县| 鹤峰县| 麦盖提县| 宁国市| 高台县| 民乐县| 祁连县| 英吉沙县| 海阳市| 左贡县| 凯里市| 于都县| 焦作市| 孟连| 陈巴尔虎旗| 易门县| 阿克陶县| 遵义市| 海晏县| 沽源县| 崇礼县| 姚安县| 佛教| 千阳县| 贵定县| 股票| 沂水县| 古浪县| 布拖县| 礼泉县| 封丘县| 藁城市| 常熟市| 吉安县| 天柱县| 冷水江市| 闵行区|