响应式 html5：百分比与媒体查询

Question

我正在开发一个简单的 html 5 游戏，类似于http://www.ebaumsworld.com/games/play/80617036/。

我需要使游戏具有响应性，我想问是否应该使用CSS 媒体查询，或者是否应该使用元素宽度和高度的百分比尺寸进行基于百分比的布局。

哪条路最好走？

Answer 1

流体布局和使用媒体查询之间的区别已写在这里： https: //ux.stackexchange.com/questions/24406/what-is-the-exact-difference- Between-fluid-and-响应式设计

当每个屏幕上的布局应该相似时，可以使用基于流体或百分比的布局。无论屏幕尺寸如何，它都会为所有元素保持相同的空间权重。

响应式设计（媒体查询）用于更改不同屏幕尺寸上的布局。

从关于您想要实现的目标的可用信息有限，我会选择两者的组合。例如，使用基于百分比的尺寸来调整大小，并使用媒体查询来确保块不会覆盖 32 英寸屏幕的 90%...