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

Question

因此，我從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與按鈕尺寸配合使用將導致不良結果，因為一個移動屏幕可能會認為它太大/太小。 應該用％處理。

Answer 1


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

		html {

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

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

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

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

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

			background-size: cover ;
		}

		} 
    <!DOCTYPE html>
<html>

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

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

				<button>2</button>
				<button>3</button>
			</div>
		</div>
	</div>

</body>

</html>

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

問題描述

1 個解決方案

解決方案1
0 2016-11-27 15:03:59

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

問題描述

1 個解決方案

解決方案1 0 2016-11-27 15:03:59

解決方案1
0 2016-11-27 15:03:59