目錄
一，移動端現狀
1，核心
2，螢幕解析度
3，谷歌瀏覽器
二，viewport
1，定義
2，語法
三，2倍圖
1，物理畫素點
2，螢幕解析度
3，解析度
4，二倍圖由來
四，移動端常見布局
1，單獨製作移動端頁面
2，響應式頁面相容移動端
3，方案
4，樣式初始化-了解
國產主流手機瀏覽器，核心 webkit。
手機解析度：碎片化太多
android：480x800, 480x854, 540x960, 720x1280，1080x1920 等
iphone：640x960, 640x1136, 750x1334, 1242x2208 等
2k：手機解析度
是開發過程中的主要模擬手段；
步驟：
視口：pc端的頁面直接放入手機屏顯示，不友好。內容原因沒有設定viewport；
定義：瀏覽器（pc、移動端）顯示頁面內容的螢幕區域；不同的螢幕的大小，我們看到的區域也是不同的。viewport就是為了解決上面問題；
預設：html980px；
理想：手機螢幕多大，html就設定是多大；
meta標籤設定：
早期的螢幕，物理畫素點都比較大，比如玩遊戲的超級瑪麗的畫面的顆粒感很強：隨著技術進
步，物理畫素點會被做的越來越小；會被做小；
螢幕解析度：物理畫素點的個數來衡量，表示螢幕水平和垂直方向的物理畫素點的個數，物理畫素點有多少個；
iphone3和iphone4是同乙個螢幕尺寸下，比較解析度：
retina（視網膜螢幕）是一種顯示技術，可以將把更多的物理畫素點壓縮至一塊螢幕裡；從而達到更高的解析度，並提高螢幕顯示的細膩程度。
物理畫素點：越做越小；（iphone4坑的寬度是iphone3物理畫素點的寬度一半）
分析：目標：顯示一樣；
解決：移動端：
開始：設定css畫素200px寬，320解析度（200）,640解析度（400）；這樣才顯示一樣；
像針對640解析度手機屏（iphone4），要求設計給400*400圖，對應我們css設定200px（自動算出畫素點個數），有二倍的關係；
命名：
了解常見布局不同，針對業務需求選擇不同的方案；實際開發過程中，都是混合使用，沒有哪一種是絕對的單獨使用；
國產移動瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。
normalize.css：大家以前自己寫的base.css
章節彙總在這裡（づ￣3￣）づ╭❤～@&再見螢火蟲&【04-前端技術】
04 前端技術 flex布局
目錄 一，體驗 二，flex direction 三，justify content 四，flex wrap和align items 1，flex wrap 2，align items 五，align content 六，flex 七，align self 八，導航欄 了解flex布局 它與傳統布局...
前端技術 四 移動端適配
通過 查詢可以檢測當前網頁執行在什麼終端，可以有機會實現網頁適應不同終端的展示風格。關鍵字將 型別或多個 特性連線到一起做為 查詢的條件。引入方式 1.link標籤引入 12.css方式 media only screen and max width 640px 其它任意樣式表 123456常用特性...
前端技術之移動端適配
目錄 移動端適配 01.查詢 示例 檔位示例 02.rem rem適配原理 示例 03.rem 應用 04.實際應用 05.less的使用 安裝 變數 巢狀 運算06.解決方案 方案1方案2 推薦 方案對比 查詢 rem 作用 感受到螢幕的變化 可以根據螢幕不同的寬，從而獲得不同的樣式，然後實現不同...