Question

因此，我从谷歌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 个答案: