1. 視口：(布局視口(layout viewport)，視覺視口(visual viewport)，理想視口(ideal viewport))
- meta 視口標簽 <meta name = "viewport" content = “ width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0”
- width：寬度設置的是 viewport 寬度，可以設置 device-width(設備寬度)特殊值
- user-scalable：用戶是否可以縮放，yes 或者 no（1 或者 0）
- initial-scale：初始縮放比，大於 0 的數字
- maximum-scale：最大縮放比，大於 0 的數字
- minimum-scale：最小縮放比，大於 0 的數字
標准的 viewport 設置
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
2. 物理像素 & 物理像素比
- 物理像素點指的是屏幕顯示的最小顆粒（也就是我們說的分辨率），是物理真實存在的，這是廠商在出廠時就設置好的，比如蘋果6/7/8 是750*1334
- 開發時的 1px 不一定等於 1個物理像素的
- PC端頁面，1個px 等於 1個物理像素，但是移動端就不盡相同
- 一個px的能顯示的物理像素點的個數，稱為物理像素比或者屏幕像素比
- 在移動端大多數 1px 開發像素 = 2個物理像素
3. 圖片，背景圖片，精靈圖的二倍圖
3.1 二倍圖片做法
- 需要一個50*50像素( css 像素)的圖片 直接放到 移動端頁面里面 會放大2倍 100*100 就會模糊
- 放一個 100*100 的圖片，然后手動的把圖片樣式縮小為 50*50( css像素 )
- 移動端 准備的圖片 比我們實際需要的大小 大2倍，這種方式就是 2倍圖
3.2 二倍背景圖做法
- 有一個 50*50的盒子需要一個背景圖片，但是根據分析這個圖片 還是要准備2倍，100*100
- 需要把這個背景圖片縮小一半，也就是50*50 background-size：寬度 高度；
3.3 二倍精靈圖做法
- 先把精靈圖等比例縮放為原來的一半
- 之后根據大小測量坐標
- 注意代碼里面 background-size 也要寫：精靈圖原來寬度的一半
4. css初始化 normalize.css
移動端 CSS 初始化推薦使用 normalize.css
normalize.css：保護了有價值的默認值，修復了瀏覽器的bug，是模塊化的，擁有詳細的文檔
官網地址：http://necolas.github.io/normalize.css/
4.特殊樣式
1. css3盒子模型：-webkit-box-sizing：border-box；
2. 超鏈接標簽，點擊高亮，需要清除 設置 transparent 完成透明
-webkit-tap-highlight-color：transparent；
3. 在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕 或者 輸入框 自定義樣式
-webkit-appearance：none；
4. 禁用長按頁面時的彈出菜單
img,a{ -webkit-touch-callout：none；}
5. 常見屏幕尺寸
