針對不同的手機屏幕優化遊戲菜單

因此，我從google playstore下載的遊戲遵循一定的模式：菜單中有一個背景圖像，並且有幾個按鈕可以點擊; 我已經在不同的設備上查看過這些遊戲，並且它看起來像背景不會拉伸或不適合，而且按鈕可以根據智能設備尺寸（平板電腦/普通電話）進行自適應。這裏是我的嘗試：針對不同的手機屏幕優化遊戲菜單

https://jsfiddle.net/0fe2Lyjg/13/

<body> 
    <div class="wrapper"> 
    <div class "option1"><button>1</button></div> 

    <div class "option2"><button>2</button></div> 
    <div class "option2"><button>3</button></div> 
    </div> 
</body>

CSS：

.wrapper button{ 
    width: 33%; 
    height: 40%; 
    margin: auto; 
    display: inline; 
} 
body{ 
    width: 100%; 
    height: 100%; 
    background-image: url("http://www.uiupdates.com/wp-content/uploads/2015/03/game-background.jpg") 
}

這裏是我想達到的目標：

畫面漂亮多介紹了吧所有;一切都調整到屏幕上，即使在背景上繪製了一個標誌，它也會出現在同一個地方。我不確定按鈕的實際設計（顏色紋理等），但你可以嘗試任何你想要的。

編輯：使用px與按鈕尺寸將實現不好的結果，因爲一個手機屏幕可能認爲它太大/小。應該處理％。

來源

2016-11-27 user1938653

究竟是什麼問題？或者你想讓別人爲你做？ –


             
   
    
    html,body{ 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 

 
\t \t html { 
 

 
\t \t \t background-image: url("http://www.uiupdates.com/wp-content/uploads/2015/03/game-background.jpg"); 
 
\t \t \t background-size: contain; 
 
\t \t \t background-attachment: fixed; 
 
\t \t \t background-repeat-y: no-repeat; 
 
\t \t } 
 

 
\t \t .parent { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t overflow: auto; 
 
\t \t } 
 

 
\t \t .block { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t right: 0; 
 
\t \t \t bottom: 0; 
 
\t \t \t left: 0; 
 
\t \t \t margin: auto; 
 
\t \t \t display: inline-flex; 
 
\t \t } 
 

 
\t \t .center { 
 
\t \t \t margin: auto; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 43%; 
 
\t \t \t padding: 10px; 
 
\t \t \t display: inline-flex; 
 
\t \t } 
 
\t \t button { 
 
\t \t \t width: 22%; 
 
\t  height: 50%; 
 
\t  margin-right: 20px; 
 
\t  border: none; 
 
\t  margin: auto; 
 
\t \t } 
 

 
\t \t @media (max-device-width: 887px){ 
 
\t \t html{ 
 

 
\t \t \t background-size: cover ; 
 
\t \t } 
 

 
\t \t } 
    <!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width"> 
 
\t <title>test</title> 
 
\t </head> 
 

 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="block"> 
 
\t \t \t <div class="center"> 
 
\t \t \t \t <button>1</button> 
 

 
\t \t \t \t <button>2</button> 
 
\t \t \t \t <button>3</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 

 
</html>

來源

2016-11-27 15:03:59 Yevhen

由於您使用了px，因此常規手機中的按鈕溢出... 100px對於它們來說太大了，對於其他設備而言可能太小了。背景重複，而不是完全適合。 – user1938653

針對不同的手機屏幕優化遊戲菜單

回答

相關問題