有哪些方式可以實(shí)現(xiàn)頁面的自適應(yīng)

vw和vh 百分比布局

個(gè)人認(rèn)為以上的一些方法也是看場景的，不同的情況使用對應(yīng)的方法, 主要還是以內(nèi)容顯示為主要考量。

舉例: 布局移動(dòng)端商品列表，左邊是圖右邊是信息的那種。

這個(gè)就需要左側(cè)固定大小，右側(cè)流式布局自動(dòng)適應(yīng)，不能寫死寬度。

關(guān)于rem的問題，以下代碼覺得比較實(shí)用

<script>
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

設(shè)計(jì)師按照750px設(shè)計(jì)效果圖，實(shí)現(xiàn)的時(shí)候就需要移動(dòng)兩位數(shù)就好了。eg: 40px -> 0.4rem 100px -> 1rem

是不是感覺方便許多。。。

還得說說的就是，個(gè)人認(rèn)為，真正的產(chǎn)品開發(fā)，一套前端代碼適應(yīng)幾個(gè)終端是個(gè)不可取的。

舉例：

• css復(fù)雜度提高了

• js操作dom 復(fù)雜度也會(huì)提高

• 對于某些html，一個(gè)dom寫入三端[移動(dòng)端, pad, pc]圖片地址，對加載速度是很有影響的，過多的媒體查詢也是這樣。

可以寫多套css需要時(shí)引入所需
而響應(yīng)式布局除了以上還可以
柵格式布局
flex布局