在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport,通讀網上的各種對於viewport的解釋之后
大概viewport可以理解為三種
1。layout viewport ,也就是這個瀏覽器默認的viewport
2。visual viewport , 瀏覽器可視區域viewport
3。 ideal viewport ,移動設備的理想viewport
通俗點講，pc端css中的1px並不會等於移動端，原理很簡單，舉個例子說
通過chrome瀏覽器可以知道，一個Iphone 6 plus是414*736，而pc端的頁面動輒幾千px以上，所以css中的1px並不等於設備的1px
這也就意味着設備的1px等於多個csspx，也就是1px:Npx的關系
具體的解釋我就不多說了，想要深入理解，可以跳轉移動前端開發之viewport的深入理解
下面講怎么設置viewport
1 <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
為了達到理想移動設備viewport，可以用meta標簽對viewport進行控制
而meta標簽內可以有很多的屬性，具體如下
| width | 設置layout viewport 的寬度，為一個正整數，或字符串"width-device" |
| initial-scale | 設置頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，為一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
那么要得到ideal viewport就必須把默認的layout viewport的寬度設為移動設備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了
那么通過各大網友的測試，寬度都是豎屏時ideal viewport的寬度
但是這句話並不是所有瀏覽器都兼容的，那么為了使瀏覽器都有一個ideal viewport，content="initial-scale=1通過這句話使縮放比例為1
ideal viewport的效果就能正常實現了，這里我也是知其然而不知其所以然，具體的內容也可以通過跳轉移動前端開發之viewport的深入理解我就不多解釋了
下面上一個簡單的移動端布局
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>
可以看到，我每個div里面都使用的rem這個代替了px單位
沒錯就是用這兩句句話來進行改變的
var offWidth = window.screen.width / 30;
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';
就拿第一個div里的height和width來舉例
width: 30rem;
100/720*30
height: 4.166666667rem;
圖片寬750,高100
由於給的圖里面第一塊是720px寬，100px的高，web端我可以直接這么寫，但是手機上肯定不行啊，因為屏幕只有這么寬
縮放比例必須是正好才行
通過window.screen.width，就已經獲取了屏幕寬，那么/30就是寬度分成30份，既然我寬度是滿屏，那么width=30rem
寬度有了，720是30rem，那么100是多少rem很好求了，完全是數學問題，100/720*30得到4.1666666667無限循環小數
本着小數越多就越精確的原則，我們取到小數點后面的9位，當然你喜歡20位也可以，不過好像瀏覽器並不支持
其他的div里的width和height也是以此類推，就不再重復說明了
還有一個圖片顯示的問題，要想圖片按比例縮放，就要用到background-size:contain
效果如下
我們可以翻轉以下，看看寬度是不是滿屏的，如圖
