移動端（視口(meta)，像素比，二倍圖(圖片，背景圖，精靈圖)，css初始化(normalize.css)，特殊樣式，常見屏幕尺寸）

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. 常見屏幕尺寸