さまざまなモバイル画面のゲームメニューを最適化する

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") 
}

ここでは、私が達成したいものです。

絵はかなりそれを説明すべて;すべてが画面にリサイズされ、背景にロゴが描かれていても同じ場所に表示されます。私はボタンの実際のデザイン（色のテクスチャなど）についてはわかりませんが、あなたが望むものを試すことができます。

EDIT：ボタンを使用してpxを使用すると、1つのモバイル画面では大きすぎる/小さすぎると考えられるため、結果が悪くなります。それは％で処理する必要があります。

出典

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

さまざまなモバイル画面のゲームメニューを最適化する

答えて

関連する問題