在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport,通讀網上的各類對於viewport的解釋以後css
大概viewport能夠理解爲三種html
1。layout viewport ,也就是這個瀏覽器默認的viewport前端
2。visual viewport , 瀏覽器可視區域viewportweb
3。 ideal viewport ,移動設備的理想viewportchrome
通俗點講，pc端css中的1px並不會等於移動端，原理很簡單，舉個例子說瀏覽器
經過chrome瀏覽器能夠知道，一個Iphone 6 plus是414*736，而pc端的頁面動輒幾千px以上，因此css中的1px並不等於設備的1pxide
這也就意味着設備的1px等於多個csspx，也就是1px:Npx的關係佈局
具體的解釋我就很少說了，想要深刻理解，能夠跳轉移動前端開發之viewport的深刻理解post
下面講怎麼設置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
效果以下
咱們能夠翻轉如下，看看寬度是否是滿屏的，如圖
更新一下咯。真機測試發現橫屏是不能鋪滿的，具體緣由，最近沒時間，等有空的時候再找一下緣由