viewport
http://www.cnblogs.com/2050/p/3877280.html
web-app-rem
http://isux.tencent.com/web-app-rem.html
http://121.40.99.17/global/rem-phone.html
1 <!DOCTYPE html>
2 <html lang="zh">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>rem phone test</title>
7 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8 <style>
9 html {
10 height: 100%;
11 width: 100%;
12 font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘;
13 font-size: 20px;
14 overflow: hidden;
15 outline: 0;
16 -webkit-text-size-adjust:none;
17 }
18 body {
19 height: 100%;
20 margin: 0;
21 overflow: hidden;
22 -webkit-user-select: none;
23 position: relative;
24 }
25 header,
26 footer {
27 width: 100%;
28 line-height: 1.5rem;
29 font-size: 1rem;
30 color: #000;
31 border: 1px solid #ccc;
32 text-align: center;
33 background-color: #ccc;
34 }
35 .bd {
36 margin-top: 1rem;
37 margin-bottom: .5rem;
38 margin-right: -.5rem;
39 font-size: 0;
40 }
41 .box {
42 width: 5rem;
43 height: 5rem;
44 display: inline-block;
45 margin-right:.5rem;
46 margin-bottom: .5rem;
47 }
48 .blue-box {
49 background-color: #06c;
50 }
51 .org-box {
52 background-color: #1fc195;
53 }
54 </style>
55
56 </head>
57
58 <body>
59
60 <header>我是头部</header>
61
62
63 <div class="bd">
64 <div class="box blue-box"></div>
65 <div class="box org-box"></div>
66 <div class="box blue-box"></div>
67 <div class="box org-box"></div>
68 <div class="box blue-box"></div>
69 <div class="box org-box"></div>
70 </div>
71
72
73 <footer>我是页脚</footer>
74
75 <script>
76 (function (doc, win) {
77 var docEl = doc.documentElement,
78 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
79 recalc = function () {
80 var clientWidth = docEl.clientWidth;
81 if (!clientWidth) return;
82 docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;
83 };
84
85 if (!doc.addEventListener) return;
86 win.addEventListener(resizeEvt, recalc, false);
87 doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
88 })(document, window);
89 </script>
90 </body>
91
92 </html>
时间： 2024-08-28 20:07:41