【轉載】移動端佈局概念總結

佈局準備工做及佈局思想及概念:   

1.  一個顯示器（pc端顯示器 及 手機屏顯示器），既有物理像素，又有獨立像素（獨立像素也叫做css像素，用於前端人員使用）； -->重要
2.  首先肯定設計稿的尺寸，而後在對應的手機屏幕尺寸上進行開發；
3.  設計稿的尺寸（好比320）/16 = 1ren等於多少20px， 而後佈局的時候，測量設計稿某個區域的寬度，好比測量的寬度是100px，100px轉換爲rem的步驟爲：100/20 = 5rem（100px 改寫成  5rem）；
4.  在寫js交互的時候，若是不肯定原設計稿的尺寸的話，則就把任意一個手機屏幕的尺寸當成原設計稿的尺寸便可，好比在蘋果5下進行操做。則就當原設計稿的是蘋果5屏幕的尺寸。而後在查看下html的字體大小，剩下的該怎麼操做，就怎麼操做；
5.  爲何不一樣的的設備，顯示的比例是同樣，由於尺寸越大，html的font-size越大，尺寸越小，html的font-size越小; 是等比例，也就是1rem在不一樣的設備瀏覽器上等於不一樣的像素。、
6. viewport設置的是瀏覽器可視區窗口的寬度,手機的屏幕寬度不屬於瀏覽器可視區，手機屏幕的寬度和瀏覽器可視區的寬度不是一個東西； --》重要

           ( viewport ) gif圖 詳解

           

 

 

瀏覽器模擬手機參數詳解（圖解）：

 

 

       

 

    

 

 

 

 

手機屏幕獨立像素和物理像素數據庫參考圖：