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

Question

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

例如：我有一个基于800px div的迷你游戏。现在我想在移动设备中运行这个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);
}