二、viewport
三、2倍圖
四、移動端常見布局
國產主流手機瀏覽器，核心 webkit。
手機解析度：碎片化太多
android：480x800, 480x854, 540x960, 720x1280，1080x1920 等
iphone：640x960, 640x1136, 750x1334, 1242x2208 等
2k：手機解析度
是開發過程中的主要模擬手段；
步驟：
視口：pc端的頁面直接放入手機屏顯示，不友好。內容原因沒有設定viewport；
定義：瀏覽器（pc、移動端）顯示頁面內容的螢幕區域；不同的螢幕的大小，我們看到的區域也是不同的。viewport就是為了解決上面問題；
預設：html980px；
理想：手機螢幕多大，html就設定是多大；
meta標籤設定：
name
="viewport"
content
="width=device-width, user-scalable=no, initial- scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
早期的螢幕，物理畫素點都比較大，比如玩遊戲的超級瑪麗的畫面的顆粒感很強：隨著技術進
步，物理畫素點會被做的越來越小；會被做小；
螢幕解析度：物理畫素點的個數來衡量，表示螢幕水平和垂直方向的物理畫素點的個數，物理畫素點有多少個；
iphone3和iphone4是同乙個螢幕尺寸下，比較解析度：
retina（視網膜螢幕）是一種顯示技術，可以將把更多的物理畫素點壓縮至一塊螢幕裡；從而達到更高的解析度，並提高螢幕顯示的細膩程度。
物理畫素點：越做越小；（iphone4坑的寬度是iphone3物理畫素點的寬度一半）
分析：
解決：移動端：
開始：設定css畫素200px寬，320解析度（200）,640解析度（400）；這樣才顯示一樣；
像針對640解析度手機屏（iphone4），要求設計給400*400圖，對應我們css設定200px（自動算出畫素點個數），有二倍的關係；
命名：了解常見布局不同，針對業務需求選擇不同的方案；實際開發過程中，都是混合使用，沒有哪一種是絕對的單獨使用；
國產移動瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。
normalize.css：大家以前自己寫的base.css
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...