1.移動端視口問題 視口是指瀏覽器的可視區域，移動端的視口到底是多寬呢？ 現在市面上的大部分手機，比如iphone X，它的預設視口寬度為980px，而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎？一個寬度只有375像素的手機，卻能夠顯示寬度為980像素的網頁，自然而然，網頁會被縮小 ...
1.移動端視口問題 視口是指瀏覽器的可視區域，移動端的視口到底是多寬呢？ 現在市面上的大部分手機，比如iphone X，它的預設視口寬度為980px，而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎？一個寬度只有375像素的手機，卻能夠顯示寬度為980像素的網頁，自然而然，網頁會被縮小。 （註：實際上，這裡說的375像素不是真實的物理像素，至於這個375像素是怎麼來的，以及為什麼大部分移動端的預設視口寬度是980，這就是另一個更加複雜的話題了，在此我們先不做討論。） 我們可以使用谷歌瀏覽器的移動端調試工具，來訪問百度的搜索結果，可以看到網頁明顯被縮小了，而且頁面寬度定格在980px（不信的話大家可以試試）。 （這種情況我也就不給大家演示了，這明顯是一個顯而易見的道理，比如你在pc端的網頁放在手機上能一樣嗎？） 而且，不同手機的實際寬度是不一樣的。 好在HTML給我們提供了一個關鍵字device-width ，該關鍵是讀取當前移動設備的寬度。 因此，我們只需要使用下麵的代碼，即可讓所有移動設備的視口寬度和其自身的寬度相等。 < meta name="viewport" content="width=device-width"> 2.移動端誤觸解決辦法 < meta name="viewport" content="width=device-width, initial-scale=1.0, min imum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 解析： initial-scale=1.0 ：初始縮放比例為1.0（原始大小），這句代碼的目的還不是放置用戶縮放的 minimum-scale=1.0 ：網頁最小的縮小比例為1.0（原始大小），設置這句代碼的目的是為了放置某些程式（比如JS）無意中修改了網頁的縮小比例 maximum-scale=1.0 ：網頁最大的放大比例為1.0（原始大小），設置這句代碼的目的是為了放置某些程式（比如JS）無意中修改了網頁的放大比例 user-scalable=0 ：這句代碼才是不允許用戶對網頁進行縮放 其實這就是禁止縮放，在手機端寫出的頁面將會無法整體左右滑動（當然，想要內部滑動可以自己設置啊），正常情況下，我們都會應用到上面的那一串代碼（在這裡說個題外話，我這兩天做項目就有一次忘記添加這段代碼，結果找半天找不出來原因，後來一問我的授課老師才發現原因（笑哭））。 3.移動端尺寸 是同一個網頁在不同尺寸手機中的效果。仔細觀察，你會發現，網頁中的很多元素，隨著視口的寬度變大，尺寸也會隨之變大，無論是字體、高度、間隙都有這樣的特點（這當然不會是響應式佈局啦，畢竟響應式佈局那麼麻煩，腦子有坑才會一點一點的去調吧）。 這樣一來，就要求我們在開發移動端的頁面時，當遇到字體大小、寬高、margin、padding等尺寸類的屬性時，不能設置固定的像素值。 註：border邊框大小除外 （既然有問題，怎麼會沒有解決辦法呢？我已經給大家寫好啦，感謝我吧！） 解決方法： 寫一段JS代碼，應用到網頁 !(function(win, doc) { function setFontSize() { var winWidth = window.innerWidth; doc.documentElement.style.fontSize = (winWidth / 設計稿寬度) * 比例 + 'px';} var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'; var timer = null; win.addEventListener(evt, function() {clearTimeout(timer); timer = setTimeout(setFontSize, 300);}, false); win.addEventListener("pageshow", function(e) {if (e.persisted) { clearTimeout(timer);timer = setTimeout(setFontSize, 300); } }, false); setFontSize(); }(window, document)); 註：將上述代碼中的 設計稿寬度 替換為設計稿的實際寬度，比如1080（不要加單位px） 註2：將上述代碼中的 比例 替換為一個合適的值，比如100（推薦而已，你也可以設置為其他的數值） 替換之後，代碼格式自然跟著改變：
這段代碼始終在監視視口寬度變化，始終保證： 根元素html的字體大小 = (視口寬度 / 1080) * 100【吶吶，就是改這個乘號後面的數值，看到了嗎？】 4.rem rem單位是相對於根元素html字體大小的（如果根元素沒有設置字體大小，則相對於基準字型大小）。而現在，根元素的字體大小，正好反映了視口的寬度。 於是，我們只需要將各種尺寸的值，使用rem作為單位，就可以適應視口寬度的變化了 rem值 = 設計稿中的尺寸 / 100（重點！！！這個100就是相對於上面的*100。） 比如，設計稿中某個元素的寬度為100像素，那麼應該設置它的寬度為 1rem ，這樣一來，當視口尺寸等於設計稿尺寸1080時，根元素的字體大小為(1080/1080)*100 = 100px ，它的寬度 為 1rem = 100px ；如果視口尺寸變小了，比如變成了375，那麼根元素的字體大小為(375/1080)*100 = 34.72px ，那麼它的寬度為 1rem = 34.72px 。這樣就完美的和設計稿比例一致了。 註意：在移動端，如果使用了背景圖（比如雪碧圖），記得用同樣的方式調整背景圖的尺寸。 題外話：移動端看上去是不是很麻煩？視口那麼小，還要引入各種東西，裡面要添加的又雜又亂，還要計算數值，是不是很麻煩？ 其實移動端是很簡單的，計算數值問題大家可以使用calc()【括弧內輸入加減乘除就好了，系統會自動幫你計算最後結果的值的】 而且，無論任何數值，在經過一切計算後，在瀏覽器中表現出來的都會是PX為單位的數值！
