前篇：做自適應網頁
網頁是乙個正常網頁（高度大於寬度），都可以用上面部落格的做法搞定。
但是，設計給了乙個固定比例的設計圖。他是按照ipad的寬高設計的：1024*768
要求是無論在哪，都保證這個比例顯示，並且居中。這個問題就變成了：固定寬高比，充分利用頁面空間（不需要滾動條），做乙個居中網頁的問題。
事實上，我們的cocos遊戲就是這種設計和布局。網頁端可以這麼判斷：
.center我們判斷寬與高的大小，取最小的一邊作為基準，然後確定另一邊的大小。調整整個頁面的大小，讓整個頁面在基準外的乙個方向上居中，最後利用rem布局。(function ()
setposition();
getrem();
window.onresize = function () ;
function setposition()
}})()
1024*768的比例在iphone6上的展示，橫屏：
豎屏：
HTML css 頁面按比例排版
在上面說的這樣的情況下，如果要定位排版，就應該使用position relative 先說說relative，它是根據原位置進行定位的。那麼原位置是什麼呢？還用剛才的例子，乙個div大小是width 100 height 30 另乙個divwidth 100 height 40 那麼正常來看，在這個...
基本的頁面設計元素布局比例
標誌圖案 位置統計結果 左上角84 右上角6 上方居中 6 其他位置 4 搜尋功能 位置統計結果 右上角35 左上角30 上方居中 14 中間居中 12 其他位置 12 導航模式 www.cppcns.com 位置統計結果 左導航柵格 30 選項卡 30 程式設計客棧 通過頁面頂端的鏈結 18 頁面...
頁面頭部和底部固定
說明 設定body的padding屬性padding top 16px padding bottom 16px，使頁面上下留有16px的空白。然後設定 header和 footer的絕對位置和高度。設定 content的 overflow auto。試著改變這幾個引數，一用就明白 header fo...