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

因此，我从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与按钮尺寸将实现不好的结果，因为一个手机屏幕可能认为它太大/小。应该处理％。

来源

2016-11-27 user1938653

究竟是什么问题？或者你想让别人为你做？ –


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

 
\t \t html { 
 

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

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

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

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

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

 
\t \t \t background-size: cover ; 
 
\t \t } 
 

 
\t \t } 
    <!DOCTYPE html> 
 
<html> 
 

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

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

 
\t \t \t \t <button>2</button> 
 
\t \t \t \t <button>3</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 

 
</html>

来源

2016-11-27 15:03:59 Yevhen

由于您使用了px，因此常规手机中的按钮溢出... 100px对于它们来说太大了，对于其他设备而言可能太小了。背景重复，而不是完全适合。 – user1938653

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

回答

相关问题