css - 根据浏览器宽度拆分网站

Question

我想创建一个分为左右两半的网站，根据浏览器的宽度，用户可以更改出现在两半中的内容。

右边是一个生成程序，可能是使用连续运行的 processing.js 创建的。左侧是带有图片和一系列页面链接的主网站。

在大屏幕台式电脑上，用户将获得两半。重要的是，无论左半部分发生什么，右半部分都需要持续运行。在过去，我只会用 Frames 来做这件事，让两半截然不同。现在使用 CSS 我不太清楚如何做到这一点。由于右侧始终保持不变，所以我想我可以使用一些针对左侧的内联 HTML - 但由于所有页面、代码和链接都在左侧 - 我被卡住了。使左侧成为 iframe 不起作用，因为它无法在 CSS 中设置样式以缩小以适应移动浏览器的宽度。

如果浏览器的宽度低于 400 像素，那么我根本不想向用户发送右侧 - 整个网站现在只是左侧(这需要缩小以适应可用宽度).如果您在手机等设备上查看网站，情况就是如此。

如果可以的话，我不想使用 JQuery、AJAX 等...或其他人的脚本。我希望所有代码都小而整洁。

想法是，在移动设备上，网站是紧凑的。在 PC 上，您会在页面右侧获得正在运行的程序的奖励。

仅使用 javascript + CSS 是否可行？

Answer 1

bootstrap 库将帮助您完成 2 列 (25%+75%):

<div class="row">
  <div class="col-xs-3" id="my-left-col">Left column
  </div>
  <div class="col-xs-9" id="my-right-col">Right column
  </div>
</div>

如果您想要最少的代码，请从这些类的 CSS 中获得灵感。