个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
33
4
好的，我正在为 IOS/Android 创建一个简单的游戏，但我在跨设备布局的一致性方面遇到了一些麻烦。
我的新假设本质上是，如果我以 16:9 的比例开发布局，它将适用于大多数/所有设备。我已经实现了保持游戏外包装的比例，但游戏区域也是 16:9 比例背景图像，我无法正确缩小以填充“游戏区域”
为此，我们假设页面顶部有 30px，底部有 30px 用于导航，这意味着“游戏区域”的高度为 100% - 60px，宽度为 100%，这会导致问题。尽管背景图像的比例为 16:9，但该区域不再是 16:9 的 Canvas 区域。
我的尝试:
关于如何获得更好的结果还有其他想法吗？
这是当前代码:
#Game_Wrapper {
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
padding: 0;
border: 1px solid red;
background: lightblue url('https://i.imgur.com/tRFltCI.png') 0 0/contain no-repeat;
}
#Game_Area {
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
}
#GUI_Top {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Top p {
margin: 0;
padding: 0;
text-align: center;
}
#GUI_Bottom {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Bottom p {
margin: 0;
padding: 0;
text-align: center;
}
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
#Game_Wrapper {
height: 100vh;
width: calc(100vh * 16 / 9);
}
}<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>最佳答案
正如您已经注意到的，不可能在同样为 16:9 且包含其他元素的容器中保持 16:9 的图像比例。
我的建议是用图像的扩展填充剩余空间，这样我们可能会认为它是同一张图像。
这是它应该看起来的近似值。我只是用相同但模糊的图像填充空白区域。这个想法是找到好的模式，使它在视觉上更好:
#Game_Wrapper {
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
border: 1px solid red;
}
#Game_Area {
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
background: url('https://i.imgur.com/tRFltCI.png') center/contain no-repeat;
position:relative;
overflow:hidden;
}
#Game_Area:before {
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
z-index:-1;
background:
url('https://i.imgur.com/tRFltCI.png') right/contain no-repeat,
url('https://i.imgur.com/tRFltCI.png') left/contain no-repeat;
filter:blur(8px);
}
#GUI_Top {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Top p {
margin: 0;
padding: 0;
text-align: center;
}
#GUI_Bottom {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Bottom p {
margin: 0;
padding: 0;
text-align: center;
}
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
#Game_Wrapper {
height: 100vh;
width: calc(100vh * 16 / 9);
}
}<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>关于javascript - 16 :9 Aspect Ratio App & Background (Accounting for space taken by the Nav)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58761969/
33
4
0
我正在使用 dplyr 来操作数据。我有两列:x 和 y。在第三列(例如 z)中，我希望所有 x 列中的第一个索引为 y。 例如: 对于第一行，我得到 4，因为 7 在 x 中处于第 4 个位置。 所
执行 ant 之一任务，启动 mxmlc (反过来使用JVM)。我得到以下输出: build-swf: [exec] Current OS is Linux [exec] Exec
随着当前 C/C++ 库(如 STL、Win32、Boost、posix 等)的庞大规模，出现了哪些标识符存在问题的问题。即使使用 namespace ，在设计旨在与现有库一起工作的新库时，也能选择不
泛型似乎提供了一个很好的工具，可以提取一个常见的单词，并使其根据您通过的类型在事物上起作用，并且事后具有扩展性。 但是，那些已经被使用但没有被定义为通用词的普通单词呢？例如，如果我尝试定义“删除”:
我正在学习如何使用 Interop.Excel。测试 Winforms 程序读取现有 Excel 文件，检查名称“Added_by_program”的选项卡是否存在，如果存在则删除工作表，并创建一个名
我收到这个错误 Caught AssertionError while rendering: Cannot filter a query once a slice has been taken. 在这
我无法从 Portal 创建存储帐户。 一旦我输入名称，它就会显示错误存储帐户名称“”已被占用。 我无法在 Azure 中找到该帐户，因此它肯定不存在。我想使用相同的名字。我可以创建具有差异名称的存储
我无法从 Portal 创建存储帐户。 一旦我输入名称，它就会显示错误存储帐户名称“”已被占用。 我无法在 Azure 中找到该帐户，因此它肯定不存在。我想使用相同的名字。我可以创建具有差异名称的存储
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我有一个模拟拍照的 AV Foundation 应用程序(如相机应用程序)。通常以下对我有用，但在这种情况下不适用。 这段代码在我的 View Controller 中的一个 Action 中执行。它
我想用更具启发性的内容替换此错误消息，以帮助用户了解下一步该做什么。不幸的是，我似乎无法在我的来源中的任何地方找到它；它来自哪里，我该如何修改它？ 最佳答案 查看 config/locales/YOU
我想写一些vimscript，如果vim session 闲置了一段时间，该脚本会被触发。这可能吗？ 最佳答案 :help CursorHold When the user doesn't press
我在我的ruby on rails应用程序中使用devise gem。在用户注册时，如果已经存在电子邮件，则存在默认消息“电子邮件已被接收”。 我已经在en.yml中更改了此消息 activere
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我想托管存储库 https://github.com/username/username.github.io在 github 页面上并使用自定义子域 user.institution.ac.in .我
我正在尝试显示此 if 语句 That name is already in use. 如果这种情况发生在我的操作页面
我正在尝试使用一维数组进行座位预订或分配。用户输入选择 2 个部分，无论是经济舱还是头等舱，但我不想走那么远，因为我还不了解算法。假设用户输入头等舱并从座位 1 中选择座位，用户输入必须保存在数组中。
我正在尝试使用 groovy CliBuilder 来解析命令行选项。我正在尝试使用多个长选项而不使用短选项。我有以下处理器: def cli = new CliBuilder(usage:
在尝试回答 question by Mehrdad 时，我编造了下面的小函数(在 liveworkspace 运行): template static constexpr auto highest_
请看这个jsFiddle:https://jsfiddle.net/n8rk814p/1/ ed div 上的文本被换行。如果内容太大，我希望它水平滚动。似乎我的 overflow-x:scroll
我是一名优秀的程序员,十分优秀！