前端学习之——h5适配
記得第一次寫移動端頁面時，本以為就按著效果圖就好了，沒想到出了很多問題，后來看了網上的一些文章，就試著將尺寸除以2，但是還是有好多地方不對，然后又學會用媒體查詢去各種寫樣式，但是，總的感覺就是太累，太浪費時間，主要最后出來的效果還不太理想，所以，這種“憑眼神”的方式寫頁面不是長久之計，決定徹底總結一次，把在各處學到的，自己領悟到的全部清晰羅列，理清思路，這樣以后就會越來越專業啦。。。
ps：這是一篇很繞很繞的博客。。
首先，還是要先認識移動端和瀏覽器端有什么不同？
我們只需要了解：
1、在pc端，css布局窗口尺寸=pc窗口的尺寸，只要效果圖設計得好，就按照效果圖來就可以了。
需要考慮的是各個瀏覽器以及瀏覽器不同版本的兼容。
2、在移動端，由于手機屏幕很窄，如果也讓css布局窗口尺寸=手機屏幕窗口尺寸，則在pc端設計的網頁，在手機端看起來會很丑。
所以，在移動端，css布局窗口尺寸比手機屏幕尺寸大得多。這樣一來，也能避免pc端網頁在手機端不會被壓扁。（比如：你寫的pc端頁面用手機打開來看，會出現橫向滾動條，需要左右滑動才能看到整個網頁。）
?
但是，如果手機端的頁面如果都要左右滑動看的話，并不理想，手機端更適合窄的頁面，所以，出現了一個概念——理想視口。
理想視口定義了不同移動端設備的理想css布局尺寸。
?
那理想在哪？舉個例子：iPhone6的理想視口尺寸為375*667 。也就是css布局就會依據這個尺寸。
?
在代碼中head標簽內加上下面的語句，可以將布局尺寸設為理想尺寸：
<meta name="viewport" content="width=device-width"/>device-width就是理想視口寬度。
關于meta標簽，之后的這篇會詳細介紹。
解決設備像素比帶來的問題
將布局視口改為理想視口之后，設計師會設計針對移動端的效果圖，我們也不用左右滑動來看完整頁面了。
?
但是，問題又出現了：設備的物理像素個數和理想視口的像素個數不總是一致的。
?
因為現在手機大部分都是視網膜屏幕，簡單來說，視網膜屏幕就是在相同尺寸的屏幕上壓縮更多的像素個數。
?
這就出現了新的概念——設備像素比。
設備像素比（DPR）=設備物理像素個數 / 理想視口像素個數
比如，早期的iPhone的設備物理像素是320px，理想視口也是320px，所以設備像素比為1。
而iPhone5的設備物理像素是640px，理想視口是320px，所以設備像素比為2。
當然，以上的計算都是基于沒有縮放的情況下 ，縮放是一個改變css像素的過程。所以當你用手指縮放頁面的時候就是在放大或縮小css像素。
也就是，如果想要讓理想視口尺寸在我們的控制之內，還得控制它的縮放。
?
在head標簽中寫下面的代碼，可以設置初始縮放和最大縮放都為1，且不允許用戶對頁面進行縮放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">?>設備像素比，會帶來什么問題？
因為設計稿一般是按照設備物理像素尺寸設計的，而且大部分都是按照iPhone6的尺寸：750px。
但是css布局是依據理想視口尺寸。
?
所以當設備像素比不為1的時候，依據設計稿尺寸寫代碼就會出錯。
?
就拿iPhone6舉個例子：
如果依據750px的尺寸設計了效果圖，里面有個寬為375px的盒子，在效果圖中它占了一半，但是如果css也寫了375px，由于iPhone6的設備像素比為2，即它的理想視口尺寸為375px，所以此時展現出來的效果是占滿全屏的。
如下圖所示：
可能你會說：那將效果圖的尺寸除以2，那不就可以了嗎？
重要的是：設計師一般只會提供一個效果圖給我們，而且并不是所有手機的設備像素比都是2，設備物理像素和理想視口尺寸都各有不同，所以即使將iPhone6的效果圖正確展現，也不適配別的手機。
>解決設備像素比帶來的問題：
在一開始的時候，我們在meta標簽中用width=device-width，將css布局尺寸設置成為了理想布局尺寸，對于iPhone6來說，就相當于將布局尺寸設置成了375px。
那么，怎樣讓設計圖上375px的尺寸，在css中也寫375px，還能在iPhone6上顯示375px的物理像素尺寸呢？
?
此時，我們就想到了之前提到的縮放，meta標簽中initial-scale=1.0, maximum-scale=1.0可以設置縮放比例。
那么，在iPhone6的例子中，如果把縮放比例設置為設備像素比的倒數，即0.5，這樣，不就可以直接按照設計圖來寫代碼，還能正確顯示了。
實驗一下：
成功了！！
?
接著，我們又想了：有沒有一種方法可以自動知道每種設備的設備像素比呢？答案是：有的。
?
window.devicePixelRatio可以得到設備像素比。所以只要在js中將meta標簽里的縮放比例動態設置為window.devicePixelRatio的倒數就可以了。
如下：
var scale = 1 / window.devicePixelRatio; $("[name='viewport']").attr('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');這樣，不僅可以直接使用設計圖尺寸寫代碼，而且還能在不同的機型上看到同樣大小的尺寸。
實驗一下：
?
?
這樣真的完美了嗎？
折騰半天，終于完美了！？？
從上面的圖，我們也看到了：確實是不同尺寸手機上都展現了同一個尺寸的紅色長方形盒子，但這真的是我們想要的嗎？
我們更希望看到的應該是：同一個盒子在不同尺寸的手機上所占比例都是一樣的，那樣才完美！
用rem解決比例問題：
rem和em：（對比一下~）
rem是相對于html標簽字體大小的相對尺寸單位。例如：html的font-size=12px; 則1rem=12px。
em是相對于父元素標簽字體大小的相對尺寸單位。例如：<div style="font-size:12px;"><span class="font-size:2em;"></span></div>;?則span標簽中字體大小就為24px。
那怎樣用rem解決比例問題呢？
試想：如果頁面中的尺寸單位都用rem代替，也就是不再用px為單位。然后html的字體大小如果可以設置一個動態生成的值（每個機型不同）。
這樣，比例問題不就解決了嗎？
?
索性，我們就將html的字體大小設為設備像素大小的 1?/ 10（iPhone6上就是75px），此刻1rem就相當于75px，5rem就相當于375px。
也就是：
$('html').css('font-size', document.documentElement.clientWidth / 10 + 'px');來看最后的效果：
?
?
我們通俗理解一下上面這種方法：
就相當于將不同機型尺寸都等分為10份，而那個紅盒子在里面都占5份，所以用這種方法可以讓盒子在不同機型中所占比例相同。
麻煩在于：就拿iPhone6的設計圖來說，html的字體大小算出來是75px，所以效果圖上量到的尺寸都要除以75，這樣會花費很多計算的時間。
都分析到這份上了，那就應該把更好的方法也總結出來：
如果是計算麻煩，那我們就從后往前推：怎樣計算比較簡單，或者說不用計算器，口算也行呢？
上面的除數是75，比較困難，你就想：如果是100，那就不困難了！
?
那怎樣可以讓除數為100呢？（其實，也就是html的字體大小為100px就行了，不是嗎？）
一般，效果圖都是iPhone6尺寸的，所以如果將其等分為7.5份，每份就是100px。
?
還有很重要的一點是：document.documentElement.clientWidth得到的是css布局寬度，那在改進方法中，還需要知道設備像素比，然后再控制縮放比嗎？
?
其實，此刻我們只需要知道等分成幾份的時候計算較方便而已，不是嗎？
所以此刻縮放比也不用根據設備像素比來動態設置了，就按原來1：1就可以了。
?
改進方法的總代碼為：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}</style> </head><body><div style="width:3.75rem; height:1rem;background:red;"></div> </body> <script src="js/jquery.js"></script> <script>$('html').css('font-size', document.documentElement.clientWidth / 7.5 + 'px');console.log(document.documentElement.clientWidth / 7.5); </script></html>之前的代碼為：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=""><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}</style> </head><body><div style="width:5rem; height:1.333333rem;background:red;"></div> </body> <script src="js/jquery.js"></script> <script>var scale = 1 / window.devicePixelRatio;$("[name='viewport']").attr('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');$('html').css('font-size', document.documentElement.clientWidth / 10 + 'px'); </script></html>所以，改進之后，計算方便了（此處講的是基于iPhone6效果圖的情況）。
那字號也要全部用rem控制嗎？
單獨把字號拿出來說的原因是：對文字來說，在頁面中所占比例不是最重要的，字兒看得清才最重要。
此刻咱們就借鑒一下大公司是怎么做的吧！
淘寶、網易等都是用媒體查詢的方式來控制字體大小：
@media screen and (max-width: 321px) {body {font-size:16px} }@media screen and (min-width: 321px) and (max-width:400px) {body {font-size:17px} }@media screen and (min-width: 400px) {body {font-size:19px} }可以由上面的代碼總結出：
1、將尺寸分為三個區間：321px以下，321px~400px，400px以上；
2、第一個區間與第二個區間之間字體大小相差1px，第二個區間與第三個區間之間相差2px；
3、具體每個區間字體設為多少像素，要看效果圖。
?
舉例：如果使用iPhone6的效果圖，且效果圖中字體大小為20px。
?
由于iPhone6尺寸為375px，在321px~400px區間，所以媒體查詢應該寫為：
@media screen and (max-width: 321px) {
????body {
????????font-size:19px
????}
}
@media screen and (min-width: 321px) and (max-width:400px) {
????body {
????????font-size:20px
????}
}
@media screen and (min-width: 400px) {
????body {
????????font-size:22px
????}
}
?
?
終于總結完了，這下腦子清晰多了，再也不用“憑眼神”了。
轉載于:https://www.cnblogs.com/zhaoyingzhen/p/8310918.html
總結
以上是生活随笔為你收集整理的前端学习之——h5适配的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oxf7b20bae
- 下一篇： 基于指令和混合的前端通用埋点方案