標籤：iphone4 post 代碼 素數 縮放 width 根據 作者 查詢
移動端相應式測試網站：http://kuapingce.com/http://www.cnblogs.com/Charliexie/p/6900640.html1190000008767416移動前端開發之viewport的深入理解https://www.cnblogs.com/2050/p/3877280.html
http://www.jianshu.com/p/84c5cb3a485a一些基本概念視窗viewport物理像素裝置像素，它是顯示裝置中的一個最微小的物理組件。每個像素可以根據作業系統設定自己的顏色和亮度。
對於前端來說：假設設計稿為750px。如果這個裝置正好能完整顯示750px寬度的設計稿。那麼裝置像素或者稱物理像素就是750px。但是可能這個裝置的實際寬度就375px。
也稱密度無關像素。可以認為是電腦座標系中的一個點，這個點代表一個可以由程式使用的虛擬像素（比如css像素），然後由相關係統轉換為物理像素。
對於前端來說：比如ip6的裝置獨立像素是375px
css像素是一個抽象的單位。主要用在瀏覽器上。
對於前端來說：設計稿多少像素就是多少像素。
指一個裝置表面上存在的像素數量。一般是用一英寸有多少像素來計算（PPI）
裝置像素比（device pixel ratio，dpr）裝置像素比 = 物理像素/裝置獨立像素
比如，iphone6的物理像素是750，裝置獨立像素是375，那麼它的dpr是2
在javascript中，可以通過window.devicePixelRatio擷取當前裝置的dpr
在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio來進行媒體查詢
以iPhone6為處理標準。
視覺稿的寬度為750px
把根項目html的font-size設定為50px，這樣1rem=50px(設為50是為了便於計算)
html{font-size:50px;}
那麼頁面的寬度為15rem
以這樣的規則去計算頁面各元素的寬高
比如一個圖片的寬高為100*100
那麼樣式寫為
img{width:2rem; height:2rem;}即以iphone6為基準計算出各元素的rem。
前端適配關於字型大小的處理，用了以裝置獨立像素為判斷準則的媒體查詢
@media screen and (min-width:320px) {html { font-size: 21.33px}body { font-size: 12px}}@media screen and (min-width:360px) {html { font-size: 24px}body { font-size: 12px}}@media screen and (min-width:375px) {html { font-size: 25px}body { font-size: 12px}}@media screen and (min-width:384px) {html { font-size: 25.6px}body { font-size: 14px}}@media screen and (min-width:400px) {html { font-size: 26.67px}body { font-size: 14px}}@media screen and (min-width:414px) {html { font-size: 27.6px}body { font-size: 14px}}@media screen and (min-width:424px) {html { font-size: 28.27px}body { font-size: 14px}}@media screen and (min-width:480px) {html { font-size: 32px}body { font-size: 15.36px}}@media screen and (min-width:540px) {html { font-size: 36px}body { font-size: 17.28px}}@media screen and (min-width:720px) {html { font-size: 48px }body { font-size: 23.04px}}@media screen and (min-width:750px) {html { font-size: 50px}body { font-size: 24px}}在以上媒體查詢處理中，對應寬度下的根項目html都設定了不一樣的font-size
比如當width為550px的時候，font-size為36px。那麼在這樣的情況下，剛剛在上面舉例的那個img元素在頁面寬度為550px的情況下顯示出來的真是寬度應該是72px。
這個方案裡，處理方式與dpr無關
這個方案的缺點是，用媒體查詢去決定html的font-size，在這樣的情況下，計算是不精確的，只能保證大體上按比例正常顯示頁面。這樣並不是完全按照以iphone6為基準的按比例計算。
比如，550px頁面寬度的時候，font-size，如果按照比例來說應該是50/750*550約等於36.67
600px頁面寬度的時候，font-size應該為40px
而按照這套方案來看頁面寬度為540px至719px的時候font-size都為36px
這隻能保證在某範圍內大致的展示，並不精確，而這個大致的值的選取也是各有各的看法。
所以，以上代碼中給出的11個範圍下的font-size不一定是合適的，這11個width範圍也不一定合適，實際有可能不需要這麼多，所以找出這些個範圍，以及每個範圍最合適的font-size也很麻煩。
首先網易使用的是640px的設計稿
應該是以iphone4或者iphone5為基準來設計的
網易用來算rem的基準是100
所以當寬度是640px=6.4rem
網易的適配方案中，動態計算了html的font-size
deviceWidth=320，font-size=320/6.4=50px---即
320/640*100pxdeviceWidth=375，
font-size=375/6.4=58.5975px
以此類推的計算
通過document.documentElement.clientWidth取得deviceWidth，然後動態計算html的font-size
如果採用這種方法，注意
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">因為這個方法與dpr無關，只是根據裝置獨立像素來計算了當前的基準font-size
lib-flxible 前端開發終端適配方案--手淘的適配方案手淘的lib-flexible庫<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>實現思路
執行這個js後，會在html（也就是document.documentElement）上增加一個data-dpr屬性，以及font-size樣式。頁面初始時會給meta的viewport動態給定scale
之後頁面中的元素，都可以用rem單位來設定。html上的font-size就是rem的基準像素。
flexible將設計稿分成100份，即100a，10a=1rem。
比如，頁面寬度為750px，那麼一份為75px，1rem=75px。
這樣將html的樣式設定為
<html style=‘font-size:75px;‘>font-size的計算方法：根項目html的font-size的計算方式是物理像素/10。
所以它的計算方式是與dpr有關，也就能比較精確的計算出當前寬度下的根項目html的font-size。能保證比較精確的按比例去展示頁面。
比如iphone 6 plus，其dpr為3，裝置獨立像素為414，所以，在iphone 6 plus下，html的font-size應該為，414*3/10=124.2px
字型大小不用rem，而是根據dpr來設定px
div{font-size:12px;}[data-dpr=‘2‘]div{font-size:24px;}[data-dpr=‘3‘]div{font-size:36px;}如果在，meta viewport中手動設定了initial-dpr，那麼不管js擷取到的dpr是多少，都會強制認為dpr是手動設定的值
所以不建議手動設定dpr的值
切圖（這裡指的圖真的是圖，需要被縮放的）的時候，要放大1.5倍切，因為現在市面上也有不少像魅藍note這種超高清螢幕，devicePixelRatio已經達到3了，這個切圖保證在所有裝置都清晰顯示。
移動端適配理解收集
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
