Chrome瀏覽器模擬移動網頁測試
終端設備及瀏覽器
分辨率
視口
輸入特性
鼠標、鍵盤
觸摸
移動瀏覽器及測試環境
PC端開發瀏覽器
Chrome、IE、Opera、Safari、Firefox
移動瀏覽器的類型
內置瀏覽器、可下載瀏覽器、代理瀏覽器、WebView
移動開發測試瀏覽器
使用Chrome瀏覽器作為移動開發測試瀏覽器的原因
很多的手機瀏覽器都用Webkit作為渲染引擎
學習成本
Chrome瀏覽器移動測試
9.5.2.視口標簽讓網頁在理想視口下預覽
問題：
相同的內容，當窗口變窄，只是盡可能縮小網站來讓用戶看到網站的全貌。這對易讀性來說不是件好事,在移動端上如何顯示PC端的網頁？
布局視口
在移動端上，視口與移動瀏覽器屏幕寬度不再相關聯，而是完全獨立的，我們稱它為布局視口
視覺視口
雖然獨立布局視口的創造很大程度上幫助了桌面網站到手機的轉移，但是我們不能完全無視移動端設備的屏幕尺寸
視覺視口是用戶正在看的網站區域。用戶可以通過縮放來操作視覺視口，同時不會影響布局視口，布局視口仍然保持原來的寬度
理想視口
默認情況下，一個手機或平板瀏覽器的布局寬度是在768px-1024px。雖然這能讓桌面網站不被壓扁，但是這并不理想，尤其對手機用戶，因為在狹窄的屏幕上更適合一個狹窄的網站
真正適合手機的視口是什么呢？
理想視口
9.5.3.em布局網頁內容
設備像素
設備像素是設備屏幕的物理像素，任何設備的物理像素的數量是固定的
設備像素比
設備像素個數和理想視口的比，稱為設備像素比（device Pixel Ratio，簡稱DPR）
DPI
用像素的數量除以屏幕的以英寸為單位的寬度可以得到你的設備每英寸的點數（簡稱DPI）
使用相對長度單位em布局網頁內容
em是描述相對于當前對象內文本的字體尺寸，它是相對長度單位。
一般瀏覽器字體大小默認為16px
相對單位em的特性
em的值并不是固定的
em會繼承父級元素的字體大?。ㄏ鄬Ω讣壍淖煮w大小而發生變化）
實際應用中每次都這樣去乘以父級的大小也是很麻煩的，有什么方法可以簡化？
如果1em等于10px，那計算起來就方便了
9.5.4.rem布局網頁內容
使用相對長度單位rem布局網頁內容
rem是CSS3新增的一個相對單位（root em，根em）
rem與em的區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素
相對單位rem的特性
rem的值并不是固定的
rem是相對根節點html發生變化的（和父節點無關）
實際開發中一般默認的把html根節點設置為10px（62.5%）或者是100px，方便后續計算
優點：
相對單位rem是集相對大小和絕對大小的優點于一身通過它既可以做到只修改根元素字體大小就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應