QQ空間Android版4.2和4.5上線的玩吧游戲“空間瘋狂套牛”是一款使用HTML5開發出的手機游戲，雖然還有很多不足，但其中使用的一些技術與技巧還是很有必要為大家分享出來，方便大家用秘籍打通各種關卡創造出更多更好的HTML5游戲。(本秘籍主要講述使用HTML + CSS技術方面)

　　一、自適應

　　Android手機的屏幕碎片化非常嚴重，各種各樣的分辨率非常之多，那么如何讓游戲可以適配這些機型就顯得尤為重要。這里也是前前后實驗了多種方案。先想到用JS來動態的根據分辨率來設置相關元素的大小，但要么在某些機型中獲取失敗，要么用賦值縮放相關元素時造成游戲崩潰……

　　反反復復折騰良久之后，終于在克強同志宣布滬港通A股H股大升的日子里想到了用 absolute 來解決：

　　關鍵代碼：

12345678

.game {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    overflow: hidden;    }

　　以上代碼使游戲容器絕對定位之后，上下左右四邊都與手機屏幕貼緊，從而做到了適配各種屏幕。

　　然后使用 background-size:cover; 讓背景覆蓋全屏，此代碼可以使背景 自動縮放 至 覆蓋 容器大小。

　　然后內部的元素根據其所接近的邊來做動態布局，下面是一個例子：

　　關鍵代碼：

12345678

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。