根据浏览器宽度拆分网站答案

【问题标题】：Splitting website based on browser width根据浏览器宽度拆分网站
【发布时间】：2014-07-28 05:31:32
【问题描述】：

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

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

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

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

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

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

这可能只使用 javascript + CSS 吗？

【问题讨论】：

标签： css iframe browser split width

【解决方案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 中获得灵感。

【讨论】：