rem與@media 的優缺點

本文轉載自查看原文 2018-02-02 17:35 4985 @media/ css/ html/ rem

　　首先: 如果我們在做單獨移動端網站或者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';
                    }
                };