rem與@media 的優缺點

　　首先:   若是咱們在作單獨移動端網站或者app的時候  我建議  使用 rem  ;

他能讓咱們在手機各個機型的適配方面；大大減小咱們代碼的重複性，是咱們的代碼更兼容。

下面兩個圖一個調試在經常使用的機型 iPhone6 寬度是375*667  （通常的手頁面的原型圖爲 750* ...)  另外一個是咱們最常出現問題的機型  iPhone5 由於是小機型因此比較容易出問題（錯位！！！！）。

這是我使用 rem 做爲單位；經過js讀取屏幕的寬度  以原型圖寬度爲標準；進行整個頁面的font-size 設置；

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {//大於750 按750算
                        docEl.style.fontSize = '100px';
                    } else {//小於750的按百分比縮減
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

以750爲例  瀏覽器讀出代碼爲 代碼中的750 可換成對應原型圖的寬度  方便計算   。

 

缺點：

侷限性; rem

目前ie不支持 對pc頁面來說使用次數很少；

數據量大：全部的圖片，盒子都須要咱們去給一個準確的值；才能保證不一樣機型的適配；

@media 

應用普遍  適用於 pc端  手機頁面，一般作自適應佈局時  咱們比較經常使用。

幾個經常使用臨界點

正常編寫   適用於 1200----1440的臺式機

 

一、@media (max-width: 1199px)  - - - - //小於1199的設備 

 

二、@media (max-width: 991px) - - - - //小於991的設備

 

 

三、@media (max-width: 767px) - - - - //小於768的設備 

 

 這樣 咱們頁面就分爲了4個部分   正常的臺式機     筆記本    平板    手機

每一個部均可以根據本身的設計圖去從新編寫本身的樣式

缺點：相對於代碼要重複不少 ； 可能存在閃屏的問題出現 解決辦法  http://blog.csdn.net/small_tu/article/details/47317453