作固定比例的頁面

前篇：作自適應網頁

網頁是一個正常網頁（高度大於寬度），均可以用上面博客的作法搞定。

可是，設計給了一個固定比例的設計圖。他是按照ipad的寬高設計的：1024*768
要求是不管在哪，都保證這個比例顯示，而且居中。這個問題就變成了：固定寬高比，充分利用頁面空間（不須要滾動條），作一個居中網頁的問題。
事實上，咱們的cocos遊戲就是這種設計和佈局。網頁端能夠這麼判斷：

.center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) !important;
        }

 (function () {
        var bodyWidth = document.body.offsetWidth;
        var bodyHeight = document.body.offsetHeight;
        var min = Math.min(bodyWidth, bodyHeight);
        console.log(bodyWidth, bodyHeight);
        var getRem = function () {
            document.documentElement.style.fontSize = (min * (bodyWidth > bodyHeight ? 1024 / 768 : 1) / 1024) * 100 + 'px';
        }
        setPosition();
        getRem();
        window.onresize = function () {
            getRem();
        };

        function setPosition() {
        	//這裏調整頁面的大小
            var contentNodeArrLike = document.getElementsByClassName('page');
            for (var i = 0; i < contentNodeArrLike.length; i++) {
                contentNodeArrLike[i].style.width = min * (bodyWidth > bodyHeight ? 1024 / 768 : 1) + 'px';
                contentNodeArrLike[i].style.height = min * (bodyWidth > bodyHeight ? 1 : 768 / 1024) + 'px';
                contentNodeArrLike[i].classList.add('center');
            }

        }
    })()

　　

咱們判斷寬與高的大小，取最小的一邊做爲基準，而後肯定另外一邊的大小。調整整個頁面的大小，讓整個頁面在基準外的一個方向上居中，最後利用rem佈局。

1024*768的比例在iphone6上的展現，橫屏：

豎屏：