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

現(xiàn)在能想到的方法有：
1、用media實(shí)現(xiàn)的多媒體查詢，分別寫(xiě)樣式
2、流式布局
3、固定寬度
4、bootstrap等框架實(shí)現(xiàn)響應(yīng)式布局
5、rem實(shí)現(xiàn)響應(yīng)式布局
除了這些還有什么常用的方式實(shí)現(xiàn)響應(yīng)式布局？或者可以說(shuō)說(shuō)以上幾種響應(yīng)式布局有哪種特別好或者不適合歡迎大神解答或者一起探討

回答

編輯回答

拮據(jù)

vw和vh 百分比布局

2017年5月23日 02:03

編輯回答

嘟尛嘴

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

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

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

關(guān)于rem的問(wèn)題，以下代碼覺(jué)得比較實(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

是不是感覺(jué)方便許多。。。

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

舉例：