探究移動端開發

時間 2020-03-28

標籤探究移動開發欄目無線简体版

原文原文鏈接

探究移動端開發

　　什麼使移動端開發呢？這就是在手機等移動端設備上的網頁開發。而且如今手機上的app有一部分也是h5頁面，對於Android系統的手機，咱們打開手機上的開發者選項，開啓顯示佈局邊界，若是發現頁面有佈局則是native，不然是h5頁面。而當今比較流行的經過rem進行移動端的適配，因此這篇文章會主要介紹一些基本概念以及rem適配方案。javascript

第一部分：基本概念

　　物理像素：這個就是在屏幕上能夠控制的最小顯示單位，好比顯示顏色的最小單位。前端

　　css像素爲邏輯像素，手機上的每個小格爲物理像素。html5

　　css像素: 就是咱們在設計網頁時在css中使用的像素，好比：border: 1px black solid;這裏的1px即爲css像素，實際上這種像素就是下面咱們要介紹的設備獨立像素。java

　　設備獨立像素（density-independent pixel）:設備獨立像素又成爲密度無關像素，它獨立於設備，好比說是css像素，他們能夠轉化爲物理像素。設備獨立像素也稱與設備無關的像素（device-independent pixel,簡稱DIPs)，更簡單的理解即爲：獨立於設備的用於邏輯上衡量像素的單位。git

　　設備像素比：即物理像素/設備獨立像素=設備像素比（device pixel ratio）,設備像素比的英文即dpr,咱們在JavaScript中能夠經過window.devicePixelRatio獲取到當前設備的dpr。那麼設備像素比是怎麼一回事呢？此問題的關鍵要歸結爲：css中的1px並不等於設備中的1px。也就是說：物理像素和設備獨立像素是不同的。在早先的移動設備中，好比iPhone3，它的分辨率是320X480（此分辨率很低），一個css像素（設備獨立像素）確實等於一個屏幕物理像素，此時dpr爲1，可是隨着科技的發展，移動設備的像素密度（下面會介紹）愈來愈高，從iPhone4開始，蘋果公司便推出了Retina屏，在屏幕尺寸沒有變化的狀況下分辨率卻大大提升了，成了640X960，這意味着：一樣大小的屏幕上，物理像素多了一倍，而css像素沒有變，因而一個css像素是等於兩個物理像素的，此時dpr爲2。如今標準的PPI已經不多見了，大可能是Retina視網膜設備，好比，iPhone5s的設備像素比爲2，iPhone6s的設備像素比爲3。（注：Retina視網膜屏幕即PPI值超過300的超高密度屏幕，只是蘋果公司給它起了一個高大上的名字而已）。你們能夠在 http://DevicePixelRatio.com這個網站中能夠看到更多設備的dpr。下圖即說明了物理像素和css像素之間的關係：github

　　像素密度(PPI)：即pixel per inch,由英文可知，PPI即爲每英寸所具備的像素點（物理像素），PPI的值越高，那麼在單位英寸中參與顯示畫面的像素越多，因而畫質越好，實際上PPI就是像素密度（pixel density）。那麼PPI是什麼計算出來的呢？看下面的公式：web

　　好比，iPhone6 Plus的像素分辨率爲1920X1080，屏幕尺寸爲5.5英寸（對角線），就能夠獲得PPI約等於401.app

　　pt:pt是什麼呢？它和px的區別又在哪裏呢？實際上px是pixel，即像素；而pt是point，是印刷行業的經常使用單位，等於1/72英寸。主要區別在於：px是一個點，它不是天然界的長度單位，這個點能夠畫的很大，也能夠畫的很小，若是點很小，那麼就說明分辨率高，不然分辨度低，它是一個相對的長度單位。而pt是專用的印刷單位」磅「，大小爲1/72英寸，總之就是說它是一個天然界中的標準的長度單位，也成爲」絕對長度「。　

　viewport　

第二部分：移動端的適配方案

　　那麼，什麼是適配呢？在作pc端的時候，只要按照設計圖的尺寸進行設計就好，可是在作移動端頁面的時候，設計師黑了，一份寬度爲640px的設計圖，這時候把這份設計圖實如今各個手機上的過程就是適配。

　　現在比較流行的即是利用rem佈局。即依照某特定寬度設置rem值頁面中任何須要彈性適配的元素，尺寸均換算爲rem進行佈局。重點：當頁面渲染時，根據頁面的有效寬度進行計算，以調整rem的大小，這時頁面中利用rem設置大小的元素就能夠同時縮放了（動態性），以此達到適配的效果。

　　那麼什麼是rem呢？rem值即在樣式中設置的html｛font-size:20px;｝,其中的20px即爲rem值，rem的全稱爲font size of root element，即根元素html的字體大小。簡單的來講，它是一個相對單位，提及rem，你們必定會想起em單位，em（font size fo the element）是值相對於父元素的字體大小的單位。em和rem之間很類似，只是在計算的規則來講一個相對於根元素一個相對於父元素。而且在em的過程當中，因爲複雜的嵌套關係，很容易致使混亂，因此使用rem是一個不錯的選擇。

　　好比當設計師給了咱們一份640px的設計稿時：

　　咱們設置了rem爲1px,這樣，在id爲square的div中設置寬度爲20rem即爲20px，高度一樣是20px，可是若是須要應用的不是640px寬度的屏幕，而是1280px寬度的屏幕，這時只要font-size修改成2px,那麼高度寬度就會成爲40px了。又好比下面這張圖片：

　　若是咱們拿到的640px的設計稿（藍色背景），當運用於640px的頁面上時，屏幕對比比例爲1，這時設置rem爲20px,對於頁面中的一個元素，設置寬度爲10rem，那麼元素寬度實際上就是20X10px即200px,可是，若是這個頁面的使用屏幕不是640呢，而是放在更小的如384px的屏幕上呢？這時，若是不作任何改變，那麼頁面必定是不能完整的顯示的，這時，由於380/640=0.6，即屏幕的寬度爲原來的0.6倍（通常不須要考慮高度），那麼只須要將rem修改成20X0.6=12px，這時元素的寬度10rem即10X12px就成了120px了。可是，因爲咱們獲得的設計稿是使用px進行設計的，因此，若是咱們要使用rem佈局，就須要每次使用這個px值除以rem獲得rem的倍數，頗有可能仍是個小數，因此這樣是很是麻煩的，可是咱們能夠經過cssrem插件（點擊便可安裝）來解決這個問題，即當咱們輸入px單位時，該插件會自動轉化爲相應的rem值。

　　這個問題解決了，但是，怎麼才能經過JavaScript動態地修改rem？

　　淘寶團隊的flexible.js是一個很好的解決方法.那什麼是flexible.js呢?

手機淘寶2014年開始推行的flexible設計，它是responsive的低端形態和基礎。
手機淘寶使用JS動態的寫meta標籤，手機淘寶的flexible方案是綜合運用rem和px兩種單位+js設置scale和html字體。

　使用方法：

一.咱們能夠將它在gitbub上下載下來，而後再<head>標籤中引用這個js文件，以下所示：

　二.另一種將該文件添加到html中的方法是直接加載阿里CDN的文件，方法以下：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

　　點擊這裏，打開cdn文件

　　不管使用哪種方法，值得注意的是：

　　 1.爲了適配的更快，而且由於咱們須要使用這個js文件動態的修改meta元素內容，若是最後加載，那麼頁面將會發現一個「突變」，影響用戶體驗，所以這個文件必定要在head中就引用，而不能在</body>以前引用。

　　　2.在使用lib-flexible時，一般不須要寫：<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>由於在這個js文件中都已經自動地設置了，它會自動處理：在執行這個js以後，會在<html>元素上增長一個data-dpr屬性以及一個font-size的值，好比30px；這樣一來，頁面中的全部元素，均可以經過rem單位來設置，他們會根據html元素的font-size值作出相應的計算，從而實現屏幕的適配效果。在flexible中由於在Flexible中，只對iOS設備進行dpr的判斷，對於Android系列，始終認爲其dpr爲1。

　　那麼說了這麼多flexible的實質是什麼呢？實際上，flexible實際上就是經過JS來動態改寫meta標籤。以下：

動態改寫<meta>標籤。
給<html>元素添加data-dpr屬性，而且動態改寫data-dpr的值。
給<html>元素添加font-size屬性，而且動態改寫font-size的值。

　　可是，編寫css時，除了font-size以外，其餘元素都要按照設計稿的尺寸轉化爲rem單位的值。顯然，咱們在iPone3G和iPhone4的Retina屏下面看到的文本號是相同的，也就是說，咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏幕手機上看到更多文本，並且如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px,因此咱們不但願出現13px和15px這樣的奇葩尺寸。這樣，rem並不適合用到段落文本上，因此在flexible整個適配方案中，考慮文本仍是使用px做爲單位，只不過要用到[data-dpr]屬性來區分不一樣dpr下的文本字號的大小。

　　即dpr爲1（物理像素/設備獨立像素=1）時字體大小爲12px，在dpr爲2（物理像素/設備獨立像素=2）時，若是仍是用12px的字體大小，那麼該字體明顯會很小，因此須要設置爲24px，對於dpr爲3時同理。

　　注意：[data-dpr="2"] div

在[data-dpr]和div之間必定要有空格，不然無法實現功能。

　　第三部分：經常使用API

[Number] lib.flexible.dpr

當前頁面的dpr值

[Number] lib.flexible.rem

當前頁面的rem基準值

[Number|String] lib.flexible.rem2px([Number|String digital])

把rem轉換爲px

[Number|String] lib.flexible.px2rem([Number|String digital])

把px轉換爲rem

lib.flexible.refreshRem()

刷新當前頁面的rem基準值