国产探花免费观看_亚洲丰满少妇自慰呻吟_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>
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 宁蒗| 南皮县| 玛纳斯县| 稻城县| 静宁县| 舟曲县| 新郑市| 安平县| 鞍山市| 阿勒泰市| 深水埗区| 报价| 中西区| 滨州市| 普兰店市| 冀州市| 屯昌县| 洛南县| 梁山县| 随州市| 天镇县| 咸宁市| 镇江市| 邻水| 临猗县| 金湖县| 珠海市| 禄劝| 肥乡县| 乐东| 青铜峡市| 新晃| 安乡县| 东阳市| 五原县| 贵溪市| 宁南县| 阿瓦提县| 三原县| 沁水县| 山阴县|