根据此 div 的宽度动态调整所有 div 内容的大小(响应式布局)

Question

有没有办法根据这个div的宽度（按比例）调整所有div内容的大小？

我有一个800像素的小游戏。现在我想在移动设备中运行这个div，而这个设备可能没有800px，所以我需要将这个div调整到这个移动大小，以及它的所有内容。此内容具有按钮和其他用户操作。

基本上，我需要一个反应灵敏的布局。有简单的方法吗？

Answer 1

应该只需要CSS就可以实现。

取决于你是否希望它是流动的（但可能最大为800px）：

#container {
    width:100%;
    max-width:800px;
}

或者，如果你想根据窗口的宽度设置大小：

#container { width:800px }
@media (max-width:800px) {
    #container { width:600px }
}
@media (max-width:600px) {
    #container { width:400px }
}

使用任一选项，内部内容要么是百分比，要么也可以针对媒体查询。

Answer 2

var widthx = document.documentElement.clientWidth //$(document).width()
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('#myDiv').css('width',widthx);
}