閱讀819 返回首頁    go 技術社區[雲棲]

rem計算適配

 建議在CSS引入之前引入下麵這段JS代碼，比例1rem：100px。

用了這個JS就不用在CSS內寫N多個@media screenXXX了。

說明：

  • 在html內最外層元素給max-width:640px,min-width:320px
  • 元素寬高都以rem為單位就會自動縮放
  • 字體大小一般0.2rem-0.34rem，如>h3:font-size:0.3rem,h4:font-size:.28rem,p:font-size:.2rem一般這幾個夠用了.
  • 引入img標簽時候該img必須float或者給一個屬性(vertical-align: middle;display:block)否則其與父元素有20多px的margin-bottom
  • 如img想自適應需要給個寬度，寬度可以百分比，可以rem為單位給固定寬度，比如img實際寬度100px,用此JS後想自動縮放，可以css裏給該img{width:1rem},其他元素雷同。
  • 如果有用到input時候，該input得浮動或者以rem為單位給固定寬度和高度，不然占據行高很大,出現元素占據位置大時候，float一下即可
  • 參考來源：戳此處
    複製代碼
    (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    //orientationchange 事件是在用戶水平或者垂直翻轉設備（即方向發生變化）時觸發的事件。
                    //resize事件是屏幕縮放時候觸發的事件
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '100px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
                /*DOMContentLoaded是firefox下特有的Event, 當所有DOM解析完以後會觸發這個事件。
                DOMContentLoaded事件本身不會等待CSS文件、圖片、iframe加載完成。
                它的觸發時機是：加載完頁麵，解析完所有標簽（不包括執行CSS和JS），
                並如規範中所說的設置interactive和執行每個靜態的script標簽中的JS，然後觸發。
                而JS的執行，需要等待位於它前麵的CSS加載（如果是外聯的話）、執行完成，
                因為JS可能會依賴位於它前麵的CSS計算出來的樣式。*/
            })(document, window);

最後更新：2017-11-03 18:03:39

  上一篇：go  構造函數
  下一篇：go  Alibaba Single's Day Festival – An Evolution of Alibaba Cloud's Underlying Infrastructure