今天學習總結

1. 移動端的一些基本基礎知識
2. 移動京東的專案搭建
3. 公共樣式的定義
4. 頂部通欄的佈局
5. 輪播圖的佈局
6. 導航條的佈局
7. 秒殺商品佈局
8. 京東超市佈局

原生移動web開發

1. 響應式開發： 寫一個頁面同時適配多個終端
2. 原生的移動web開發： 分別針對每個端都寫一套程式碼 PC端寫一套程式碼 移動端寫一套程式碼
   1. PC端一般使用固定寬高的佈局
   2. 移動端全屏撐滿整個頁面 全屏100% 使用百分比佈局（流式佈局）
      目前最流行最先進的方式rem佈局方式

網頁的佈局方式

1. 固定寬高佈局 （PC端）
2. 百分比佈局 （PC和移動端都能用）
3. flex伸縮佈局 (PC和移動端都能用 廣泛用在移動端)
4. rem佈局 (移動端 相對單位相對根元素的字型大小)
5. 浮動 + 定位 (PC和移動端都能用)

注意以上佈局方式不是每個頁面只能使用這一種 你可以根據需求根據效果靈活搭配使用
百分比+flex
百分比+rem
flex+rem
百分比+flex+rem

移動端的站點 以m開頭

1. m.jd.com
2. m.taobao.com
   移動端頁面結構
   搜尋框
   輪播圖
   導航條
   商品
   底部
   移動端頁面的內容比較簡單 樣式也簡單
   移動端頁面核心： 使用者體驗（UI介面效果 載入速度快） 功能方便快捷 考慮各種手機螢幕適配

移動端一些常見的螢幕的相關知識

1. 長度單位(絕對單位和相對單位)

2. 尺寸in： 單位 絕對單位 1英寸=2.54釐米 在手機裡面的英寸指的是手機對角線的長度
   手機對角線長度5英寸 5*2.54釐米 = 12.7釐米

3. 畫素px: 單位 如果按照螢幕 就是螢幕裡面的最小單元 如果圖片就圖片裡面的最小單元
   螢幕都是一格格的 px就是螢幕裡面的一個格子
   圖片也是一格一格的 px就是圖片裡面的一個格子

4. 點pt: 印表機裡面的最小單元 每一個點 1pt = 1/72英寸

5. 畫素密度ppi: 每英寸裡面的px數量 1英寸裡面的px越多螢幕越清晰 小格子越多

6. vw、vh、vmin、vmax 的含義

7. vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
   視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

8. 具體描述如下：
   vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
   vh：視窗高度的百分比
   vmin：當前 vw 和 vh 中較小的一個值
   vmax：當前 vw 和 vh 中較大的一個值

移動端的畫素

1. 螢幕解析度畫素： 螢幕裡面的一個顯示頁面的屏（內屏的大小 顯示的格子數量）
   iphone6 7 8 7501334 表示螢幕水平能夠放750個格子px 垂直能放1334個格子 px
   iphone 4s 5 6401136 表示水平640格子px 垂直1136格子px
   iphoneplus 10801920 表示水平1080格子px 垂直1920格子px
   電腦解析度 1366768 表示水平1336格子px 垂直是768格子px
   手機解析度 大的值是高 小的是寬
   電腦解析度 大的值是寬 小的值是高

2. 螢幕的真實畫素 ： 螢幕尺寸的大小 (外屏大小和手機尺寸有關)
   iphone 6 7 8 375667 表示螢幕的真實的寬度375px真實的高度667px
   iphone 4 5 320568 表示螢幕的真實的寬度320px真實的高度568px
   電腦 1366*768 表示螢幕的真實的寬度1366px真實的高度768px

3. 螢幕解析度畫素和真實畫素的關係

   1. 手機 螢幕解析度 比 真實畫素 大2倍的
   2. 電腦 螢幕解析度 和 真實畫素 一致
   3. 一般如果解析度比真實畫素 大 就表示這種螢幕是retina螢幕 (視網膜高清屏) 如果解析度和真實一致表示普通螢幕

4. CSS邏輯畫素： 由我們程式設計師自己來控制 根據視口來控制
   一般在PC端視口寬度=裝置寬度 在PC寫了1px在頁面就是1px
   在移動預設視口!=裝置畫素 在移動端預設寫1px不是真實的1px
   但是一般我們會設定移動端視口寬度=裝置的真實寬度 這個時候1px=1真實px

總結:

1. 手機的解析度px的大小和真實px大小不一樣
   現在的主流是2倍 解析度大小px是真實螢幕px大小的2倍
2. 電腦的解析度px和 真實px大小一樣的
   解析度 1366768 == 真實 1366768
3. 由於視口設定得和真實螢幕寬度一致 CSS邏輯畫素 == 真實畫素
4. 由於手機真實px=解析度的一半 CSS畫素也是解析度的一半
   寫了一個375的盒子 在解析度放大2倍來顯示 把盒子寬高都放大2倍
5. 寫程式碼是按照真實的px來寫程式碼的的

移動端設計圖

1. 移動端設計稿一般是按照解析度設計的 （為了保證圖片在解析度裡面不會失真）
2. 但是寫程式碼按照真實畫素來程式碼
3. 由於解析度比真實大2倍 所以 寫程式碼的時候量設計稿的大小 縮小一半來寫
4. 例如量了750寬度 只能寫375 量了80 只能寫40（一般設計師會標好 也要按照標好的一半來寫）

移動端二倍圖的原理

1. 頁面寬高參照真實畫素 但是真實畫素比解析度小一半的
2. 頁面在解析度呈現的時候都會放大2倍 頁面所有內容包括圖片文字都會放大2倍
3. 如果是向量圖放大不會失真 文字放大也不會失真 但是一些非向量圖在移動端放大就會失真
4. 使用圖片的時候不能寫圖片真實大小 要縮小一半來寫

後續3倍 4倍 解決方案都一樣

1. 設計師會設計3倍圖片 和設計稿 寫頁面的時候 縮小3倍來

總結移動端的px概念和二倍圖的原理

1. 解析度表示內屏顯示的畫素數量 手機解析度一般比較高都是2倍以上的
2. 真實畫素表示裝置真實的物理畫素
3. CSS邏輯畫素表示CSS中寫的px單位(但是由於視口和真實畫素一致所以CSS邏輯=真實畫素)
4. 移動端設計稿和圖片一般是按照解析度來設計（因為頁面最終都會在解析度顯示為了保證圖片不失真）
5. 當我們拿到設計稿的寫程式碼的時候因為 解析度是真實2倍也是CSS畫素2倍
   所以設計稿上的px都要縮小1半在CSS中寫
   例如設計稿750px 寫樣式只能寫375px
   設計稿是80px 只能寫 40px
   設計稿的文字大小是32 只能寫16px

移動的其他知識可以參考下面資料:

http://www.woshipm.com/pmd/176328.html
http://www.cnblogs.com/jiangzilong/p/6700023.html