移動端默認的視口大小是980px（css像素）`<meta name="viewport" content="width=375">`可修改默認的視口大小 默認情況下，移動端的像素比就是980/移動端寬度(如iphone6 980：750，完美視口應該是375:750) >[danger]為什么是750呢？ *iPhone6*的理想*視口寬度*為375px,同時設備物理像素為750px,*iPhone6*的設備像素比為2 如果我們直接在網頁中編寫移動端的代碼，這樣在980的視口下像素比是非常不好，導致網頁中的內容非常小，如iphone像素比：980：750，即1px的css像素=0.765物理像素（即在手機的一個物理像素里顯示的內容更多，內容變小） 編寫移動頁面時必須確保有一個比較合理的像素比： 1css像素 對應2個物理像素 1css像素 對應3個物理像素 怎么搞呢，就是用meta標簽修改手機的視口大小 ~~~ <--將移動端的視口大小從默認的980px改為100px--> <meta name="viewport" content="width=100"> ~~~ 然后測試下： ``` <style type="text/css"> html,body{ margin: 2px 0; padding: 2px 0; } .box1{ width:100px;height:100px;background-color: #bfa; } </style> <div class="box1"></div> ```  每一款移動設備設計時,都會有一個最佳的像素比, 一般我們只需要將像素比設置為該值即可得到一個最佳效果 將像素比設置為最佳像素比的視口大小我們稱其為完美視口 iphone6將視口調成375，這樣375：750=1：2 ~~~ <meta name="viewport" content="width=375"> ~~~ 375是iphone的最佳視口，其他手機的最佳視口是不一樣的怎么查詢手機的最佳視口？ 除了之前提到的[查看手機像素的網站](https://material.io/resources/devices) 瀏覽器F12切換成移動端模式，也可以查看  每個移動端的完美視口可能不一樣，我們怎么做到兼容每個移動端都能實現完美接口？`content="width=device-width, initial-scale=1"` ```html // 兼容標簽 指定雙核瀏覽器默認以何種方式渲染頁面。這里指定默認用webkit內核渲染 <meta name="renderer" content="webkit"> <!-- 適應移動端完美視口 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` 每個移動端的完美視口不一樣，設置固定寬度如px就不行了，需要使用vw vw表示視口寬度（viewport width） 100vw就是一個視口寬度 1vw=1%視口寬度（1/100視口寬度） iphone6視口寬度750px=100vw（`<meta name="viewport" content="width=750px">`） 那么1px=0.1333333333333333vw（100/750） 設計圖的寬度：750px(375的2倍) 、1125px（375的3倍，應對當前某些及以后高清晰度手機） 以750px的設計圖為例：我們向要一個48px*35px的按鈕,用多少vw表示？ 100/750=0.1333333333333333 （100/750）*48=6.4vw （100/750）*35=4.667vw ``` .box{ width:6.4vw; height:3.667vw; } ``` 上面不好計算： 換成rem 1 rem= 根元素html的 1 font-size 將html的font-size設置為100px 那么1rem=100px; 如果將html的font-size設置為0.1333333333333333vw 那么1rem=1px=0.1333333333333333vw； 此時元素的寬高設置如下： ``` .box{ width:48rem; height:35rem; } ``` 但是，瀏覽器的最小font-size為12px，設置的font小與的12px，會被瀏覽器強制修改為12px 那么將html的font-size擴大10倍 ``` html{ font-size=1.333333333333333vw； } ``` 此時元素的寬高設置如下： ``` .box{ width:4.8rem; height:3.5rem; } ``` 查看元素明顯有點大？參看下此時html的font-size還是12px 1px=0.1333333333333333vw 10px=1.333333333333333vw； 所以還不夠 擴大40倍 ``` html{ font-size=5.333333333333333vw； } ``` 此時元素的寬高設置如下： ``` .box{ width:48/40rem; height:3.5/40rem; } 即 .box{ width:1.2rem; height:0.875rem; } ``` 具體參看vw解決方案