最近遇到了乙個比較複雜的移動端頁面，就重新學習了一下移動端的螢幕適配。發現水很深！
先來說說我最近接觸的一些頁面，都是比較簡單的，舉個相似的例子，拉鉤網iphone6下顯示效果：
iphone5下顯示效果：
ipad下顯示效果：
可以看出這類的頁面有兩大特點：
這種頁面是一種典型的彈性布局：
元素高度和位置都不變，只有容器元素在做伸縮變換。
這類頁面是適配布局裡面的基礎布局，對於這類的頁面，只要做到：文字流式，控制項彈性，等比縮放，如圖**自所示：
通俗一點，width可以用百分比，高度用px作為單位。屢試不爽啊~
但是拉鉤網專門對iphone4做了適配**自：
如果啊到的設計稿是基於iphone4裝置大小的，就沒有問題。如果難到的是大螢幕設計稿，就要考慮小螢幕的適配問題了。
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...
移動端螢幕適配
方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...
移動端螢幕適配 （ media ）
media screen and max width 300px media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media q...