1.pixel

• px：邏輯畫素，1px在不同裝置上的實際大小不一樣
• dp，pt：物理畫素，1pt在不同裝置上的實際大小一樣
• dpr：裝置畫素縮放比，px和pt之間的計算關係
• 計算公式：1px = (dpr)² * pt
• DPI、PPI：單位英寸內的畫素密度
• 1136、640為物理畫素
• PPI越高，螢幕縮放比越大（圖片會變小）

2.viewport（視口）

• layout viewport： 網頁佈局區域的大小

/* 獲取layout viewport */
document.documentElement.clientWidth;
document.documentElement.clientHeight;
 

• ideal viewport： 裝置螢幕區域

/* 獲取ideal viewport有兩種情形 */
/* 新裝置 */           /* 老裝置 */
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

• 保證為PC設計的網頁在移動裝置上佈局不發生錯亂，移動裝置會預設設定一個較大的layout viewport（如IOS為980px）
• 為了使頁面完整的顯示在手機螢幕上，裝置產商將網頁進行了縮放，縮放比例為 ideal viewport / layout viewport
• 通過設定meta，保證頁面不被縮放

<meta name="viewport" content="width=device-width, initital-scale=1.0, user-scalable=no">

3.長度單位

• em： 相對長度單位（參照父元素），其參照當前元素字號大小，如果當前元素未設定字號則會繼承其祖先元素字號大小。

例如：.box {font-size: 16px;} 則 1em = 16px
.box {font-size: 32px;}則 1em = 32px，0.5em = 16px

• rem： 相對長度單位（參照 html 元素）， 其參照根元素(html)字號大小

例如 ：html {font-size: 16px;} 則 1rem = 16px
html {font-size: 32px;} 則 1rem = 32px，0.5rem = 16px.

• vw：viewport width，視口寬度（1vw = 1%視口寬度）
• vh：viewport height 視口高度（1vh = 1%視口高度）

4.移動觸屏事件

• 事件型別：touchstart、 touchmove、 touchend、 touchcancel
• 觸控的事件物件： touches、 targetTouches、 changedTouches。 PS：沒有對比出 touches 同 targetTouches 的差異，推薦使用 targetTouches。
• targetTouches物件： screenX/screenY、 clientX/clientY、 pageX/pageY

5.移動端常用外掛

• zepto.js：封裝了很多手勢
• fastclick.js：用於解決點透和 點選事件延遲 的問題
• 點透： 假如有兩個盒子，盒子A和盒子B，如果盒子A在盒子B的上面，當我們使用tap事件點選盒子A的時候，盒子B會觸發 click 事件，這就是點透。
• isScroll： 一個高效能，資源佔用少，無依賴，多平臺的 javascript滾動外掛
• swiper：輪播圖

6.響應式佈局

• 響應式佈局，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式
• 響應式佈局缺點：為了適配各種裝置，會有很多冗餘程式碼， 使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題
• 響應式佈局常用於企業的官網、部落格、新聞資訊型別網站，這些網站以瀏覽內容為主，沒有複雜的互動

7.常見的響應式框架

• Bootstrap： 是目前最受歡迎的前端框架
• Amaze UI： 中國首個開源 HTML5 跨屏前端框架， Amaze ~ 妹子UI，國人開發，後起之秀！
• Framework7： 主要用於開發混合手機App或者網頁App

8.web特別樣式處理

• 1畫素邊框
• 相對單位rem的基值設定：1rem = screen.width/20px
• 多行文字溢位

9.PWA（Progressvie Web App）

• PWA技術可以使web頁面擁有像原生app一樣的使用者體驗，如快取頁面、接收推送、從桌面直接開啟等
• 關鍵技術：
• Web App Manifest：配置web頁面使web頁面可以有桌面圖示、快捷方式
• Service Worker：攔截Http請求，優先開啟快取頁面
• Push Notification：使web頁面即使在離線狀態也可以推送和接收訊息