微信小程序的像素大小使用rpx，rpx換算px屏幕寬度/750。

傳統的自適應布局有幾種：

響應式，根據屏幕大小配置多個樣式文件。

使用em,rem.rem是頁面的font-size尺寸，不同的頁面設置不同的font-size。

    (function winInitFontSize(){
            window.onresize = initFontSize;
            function initFontSize(){
                var winWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                
 
//rem的基數設置大一點，可以減少誤差
                document.getElementsByTagName("html")[0].style.fontSize = ((winWidth > 750 ? 750 : winWidth)/750) * 100 + ‘px‘;
            }
            initFontSize();
        })();

使用百分比或者flex，鋪滿屏幕，高度字體還使用px.

scale通過拉伸縮小頁面自適應。直接寫死viewport的寬度。這種方式不可以設置minimum-scale=1.0。

<meta name
 
="viewport" content="width=375, user-scalable=no">

使用類似rpx的方式：

  width: calc((100vw / (750/16)) - 0.1px);
  height: calc((100vw / (750/30)) - 0.1px);

假如利用sass倒是可以設置變量，不用一條一條這樣寫。只是這種在瀏覽器中，有時會大得可怕。因為100是瀏覽器的寬度，而不是可使用的寬度。而將100vw寫成100%會不起效果。可能100%是動態的，導致不起作用。

有新的收獲了再來更新文檔。

網頁自適應的幾種方式。