针对不同的手机屏幕优化游戏菜单

Question

So, the games I download from the google playstore follow a certain pattern: there is a background image at the menu, and there are a few buttons to click at; 因此，我从google playstore下载的游戏遵循特定的模式：菜单上有背景图片，有几个按钮可以单击； I've checked those games at different devices and it seems like the background doesn't stretch or misfits, and the buttons fit themselves according to the smart device size(tablet/regular phone). 我在不同的设备上检查了这些游戏，看来背景并没有拉伸或不合适，并且按钮根据智能设备的尺寸（平板电脑/普通手机）适合自己。 here is what I tried: 这是我尝试过的：

https://jsfiddle.net/0fe2Lyjg/13/ 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: 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")
}

here is what I want to achieve: 这是我想要实现的目标：

the picture pretty much describes it all; 图片几乎说明了一切。 everything resizes to screen, and even if there was a logo drawn on the background it would appear at the same place. 一切都会调整为屏幕大小，即使背景上绘制了徽标，徽标也会出现在同一位置。 I am not sure about the actual design(colors textures etc) of the buttons but you can try whatever you want. 我不确定按钮的实际设计（颜色纹理等），但是您可以尝试任何您想要的按钮。

EDIT: using px with buttons dimensions will achieve bad results since one mobile screen might consider it too big/small. 编辑：将px与按钮尺寸配合使用将导致不良结果，因为一个移动屏幕可能会认为它太大/太小。 it should be dealt with %. 应该用％处理。

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