標籤：比例 方案 手機 相同 idt 倒數 原因 iphone 知識
接觸移動端網頁已經有一段時間 了，一直希望找個機會好好地總結以下，但一直比較懶，所以才拖到了今天。
推薦網站：www.aol.com 響應式做的很好。
之前我寫過一篇關於移動端布局的文章，這裡。這篇文章中介紹了大部分的基本知識點，有需要的可以參考。
我們知道常用的布局方案有：
1. 百分比布局，高度固定
第一種布局方式在移動端是不可採取的，尤其是Retina屏的出現。 有人說我高度不固定而是採用高度由內容撐起來，這樣同樣是解決不了內容被壓扁的尷尬，原因自然就是iphone6 、iphone 6 plus等的出現，dpr更高， 所以元素就會被壓扁，簡單的測試就可以得出相關的結論。
2.寬度固定，使用viewport縮放
這種方式也是不可取的，會造成像素丟失、文本折行等種種問題。
3.rem布局
這種布局方式是最好的。
rem布局中，是以根項目<html>的font-size 大小為基準的， 我們一般使用flexible.js即可實現。它會動態地設定meta標籤，使得網頁在各個手機瀏覽器上都能很好地顯示。
但是使用rem布局有下面的幾個方面是我們需要關心的。
第一： 怎麼理解dpr，width、device-width、等基本概念
我們先引入flexible.js，然後再chrome中開啟，然後可以發現iphone6（750*1334） 的上面的width為375，這個實際上就是device-width，而我們是根據750px的設計圖進行還原的，這裡的750px就是我們的css像素width，這一點實際上我們通過學習媒體查詢也是可以領悟到的，並且可以看到，在meta標籤中，scale為0.5，這是因為我們做的750px的網頁需要強行縮小一半放入Ipone6中，這樣，和其他dpr為1的手機相比，不難得知，iphone6的手機在相同的螢幕大小有更多的像素點，這樣毫無疑問，顯示也就越清楚。同樣，拿到iphone 6 plus可以發現，其dpr為3， scale為0.33333，從這兩個例子我們就可以發現dpr和scale互為倒數的關係。並且我們再html的元素中看到的font-size實際上就是width的1/10 。
第二：對文本段落的字型設定使用px還是rem？
選用他們中的哪一個，這個決定於實際項目的需要。 首先可以肯定的是，我們一定不能僅僅使用px來設定，而是通過dpr來設定不同dpr下的段落的字型大小，如果不是這樣，不難想象，在iphone5及以上，字型會突然變小，從而產生極差的使用者體驗。
如果結合dpr使用px，我覺的這是最好的一種方式，這種方式的優點在於：1. 在retina螢幕下文字也不會變得很小，而是正常的顯示。 2. 即使手機的螢幕比較大，字型也不會顯示地很大，這樣可以使得使用者體驗更好，試想，即使我們拿了一個較大的手機， 多是用於看視頻或者是玩遊戲等等，而這時顯示在你手機上的文字卻特別大，是不是很奇葩呢？ 3. 這樣做的另一個好處就是不會因為使用rem從而導致你的字型可能會出現一些比較奇葩的尺寸。
但是並是不是說使用dpr結合px就沒有壞處了，比如說我們需要一款產品，要求這一行的最後一個子一定是我，下一行一定是愛，最後一行一定是你，這時，如果使用px來設定字型顯然是做不到的，因為其中的字型會隨時隨著螢幕而變化位置的，但是使用rem布局就不是這樣了，因為rem布局會等比例的放大或縮小，所以rem布局就會很好地滿足這一需求。
移動端適配詳解
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
