Optimizing game menus for different mobile screens
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; 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/
<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")
}
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. it should be dealt with %.
1 answers
solution1
0 2016-11-27 15:03:59
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.