Html5移動端頁面自適應佈局詳解(rem佈局)
阿新 • • 發佈：2018-12-23
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
8 <script>
9 //通過window.screen.width獲取螢幕的寬度
10 var offWidth = window.screen.width / 30; //這裡用寬度/30表示1rem取得的px
11 document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值複製給頂級標籤html的font-size
12 </script>
13 <style>
14 /*偷個懶就直接全域性初始化了*/
15
16 * {
17 padding: 0;
18 margin: 0;
19 }
20 /* 佈局需求,上下都間隔*/
21 div {
22 margin: 0.833333333rem 0;
23 }
24 /* 去處a標籤的下劃線*/
25 a {
26 text-decoration: none;
27 }
28
29 .one {
30 width: 30rem;
31 /*100/720*30*/
32 height: 4.166666667rem;
33 /*圖片寬750,高100*/
34 background: url("./img/head.png");
35 background-size: contain;
36 }
37
38 .two {
39 width: 30rem;
40 /*400/720*30*/
41 height: 16.6666667rem;
42 /*圖片寬750,高400*/
43 background: url("./img/top1.jpg");
44 background-size: contain;
45 }
46
47 .three {
48 width: 30rem;
49 height: 5.875rem;
50 /*圖片寬750,高141*/
51 background: url("./img/top2.jpg");
52 background-size: contain;
53 }
54
55 .four {
56 width: 28.33333333rem;
57 height: 13.16666667rem;
58 /*圖片寬750,高316*/
59 background: url("./img/top3.jpg") no-repeat;
60 background-size: contain;
61 margin-left: 0.833333333rem;
62 position: relative;
63 }
64
65 span {
66 position: absolute;
67 display: block;
68 width: 8.33333333rem;
69 height: 2rem;
70 line-height: 2rem;
71 text-align: center;
72 background: #fff;
73 right: 0.833333333rem;
74 bottom: 0.833333333rem;
75 font-size: 0.95833333rem;
76 color: red;
77 cursor: pointer;
78 }
79
80 .five {
81 width: 28.33333333rem;
82 height: 13.16666667rem;
83 /*圖片寬750,高316*/
84 background: url("./img/top4.jpg") no-repeat;
85 background-size: contain;
86 margin-left: 0.833333333rem;
87 }
88 </style>
89
90 </head>
91
92 <body>
93 <div class="one"></div>
94 <div class="two"></div>
95 <div class="three"></div>
96 <div class="four">
97 <a href=""><span>25元起</span></a>
98 </div>
99 <div class="five"></div>
100 </body>
101
102 </html>