根据浏览器宽度拆分网站

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中获得启发。