做固定比例的页面
前篇:做自适应网页
网页是一个正常网页(高度大于宽度),都可以用上面博客的做法搞定。
但是,设计给了一个固定比例的设计图。他是按照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上的展示,横屏:
竖屏: