我怎样才能让这些div在页面响应性的作用下互相移动呢？

要让这些div在页面响应性的作用下互相移动，可以通过以下步骤实现：

使用HTML和CSS创建div元素：首先，在HTML中创建多个div元素，并使用CSS设置它们的样式、位置和动画效果。
使用JavaScript处理交互：通过JavaScript获取这些div元素的引用，并添加事件监听器，以便在页面加载完成后执行移动动作。
编写移动逻辑：使用JavaScript编写逻辑，通过计算和修改每个div元素的位置属性，使它们能够在页面响应性的作用下相互移动。可以利用CSS的动画过渡效果，或者使用JavaScript的定时器来实现平滑的移动。
响应性设计：为了实现页面响应性，可以使用CSS的媒体查询来根据不同设备的屏幕大小和方向，调整div元素的样式和位置，以适应不同的视口。

下面是一个示例代码，实现两个div在页面响应性下互相移动：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

<script>
  // 获取div元素的引用
  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");

  // 设置初始位置
  var x1 = 0;
  var x2 = 200;

  // 添加事件监听器，等待页面加载完成后执行移动动作
  window.addEventListener("load", function() {
    moveBoxes();
  });

  // 移动div元素
  function moveBoxes() {
    // 修改位置属性
    box1.style.left = x1 + "px";
    box2.style.left = x2 + "px";

    // 更新位置值
    x1 += 5;
    x2 -= 5;

    // 通过定时器实现平滑移动
    setTimeout(moveBoxes, 50);
  }
</script>
</body>
</html>

这个示例代码中的div元素具有绝对定位，通过修改它们的left属性来实现移动效果。在页面加载完成后，调用moveBoxes函数来移动div元素，通过不断更新位置值并使用定时器，实现了在页面响应性的作用下互相移动的效果。

注意：这个示例代码只是演示了基本的移动逻辑，实际应用中可能需要更复杂的交互和样式效果。在开发过程中，可以根据具体需求进行调整和优化。