接觸移動端網頁已經有一段時間 了，一直希望找個機會好好地總結以下，但一直比較懶，所以才拖到了今天。
推薦網站：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佈局就會很好地滿足這一需求。