[英]Optimizing game menus for different mobile screens
因此,我从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与按钮尺寸配合使用将导致不良结果,因为一个移动屏幕可能会认为它太大/太小。 应该用%处理。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.