css - 使用响应式设计改造现有站点

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center 指导。




8年前关闭。




希望这个问题不会违反任何规则，即使它可能会导致一些争论。如果它读起来好像我要求为我编写代码，我不是!我只需要一些有关解决此问题的最佳方法的建议，并阅读了论坛上的许多建议，并在 Codepen 和 jsFiddle 上修改了许多不同的代码，我已经看到这些代码，我现在可能比在开始!

对于存在，我将尝试尽可能详细地解释我所追求的......

我维护一个现有站点 ( http://www.margate-fc.com/content/frontpage.php ) 并且早就应该重新设计了。由于大量流量来自移动设备，当前的固定布局不适合，我想让整个站点响应，同时保持当前的 Header<>Sidebar,Content,Sidebar<>Footer 布局或至少类似的布局。

页眉和页脚将在各种分辨率下略有变化，导航栏将在某个断点处切换到下拉/ Canvas 外菜单，但这些都不会成为问题。

中间部分(边栏、内容、边栏)在移动设备和桌面之间变化最大，也是我需要建议的地方。将有三种不同的布局...

所有三列都可见(800px 及以上)

内容和右侧边栏(广告)并排可见，左侧边栏(统计)关闭 Canvas (799px 及更低)

内容和右侧边栏堆叠以及左侧边栏关闭 Canvas (可能为 479 像素和更低 - 但实际上它会在内容变得太窄的地方)

我想考虑的其他一些事情......

我希望将两个侧边栏保持为尽可能固定的宽度，否则左侧边栏内的内容可能会变得脱节。

我希望整个设计流畅到某个 Angular ，并在更宽的屏幕上为侧边广告留出空间。

理想情况下，我希望侧边栏在作为列可见时具有匹配的高度和背景颜色，而无需破解(实际上选择不使用宽边框或图像的 bg 颜色)。

那就不用问了，嗯？

我已经阅读了很多关于我正在努力实现的每件事的不同建议，其中大部分没有问题，并且在之前的某个时候已经做了很多。我遇到的麻烦是让这一切一起工作。

理想情况下，我希望在使用框架并深入研究 Twitter Bootstrap 后实现我的目标。我遇到的问题是跨度太流动了(所以侧边栏很容易从比它们包含的内容宽得多到太小)并且排水沟太宽了。我确实试图改变它们，但没有数学学位，结果一团糟。

此外，在特定的屏幕宽度下，侧边栏都是可见的，但没有内容。随着屏幕变小，内容又回来了。

这就是我目前所处的位置，我真的很感谢所有读到这里的人!

那么，实现我所追求的目标的最佳方法是什么？我是尝试使用比 Bootstrap 更灵活的框架还是尝试手动编码？如果是后者，我是从移动布局开始，然后通过更高的断点，还是从全屏开始(因为使用相同的高度和彩色列将是最难实现的)并通过分辨率向下工作？

或者有没有其他人可以建议的方法来解决这个问题？我愿意接受任何建议，最好尽可能基于 CSS，但如果认为这是最好的方法，我会很乐意使用一些 JS。

最佳答案

我不会在无法看到您的代码的情况下解决所有问题，但让我举一个例子:

Ideally I was hoping to achieve what I was after using a framework and dived in with Twitter Bootstrap. The trouble I had was that the spans were too fluid (so the sidebars went from much wider than the content they contained to too small very easily) and the gutters were too wide.

所以我将其解释为您对网格的基本流动性很好，但您的侧边栏 div 需要表现不同。好，然后把它们从格子里拿出来，分别处理。

代替:

<div class="container span12">
  ...
  <div id="sidebarLeft"  class="span2">...</div>
  <div id="content"      class="span8">...</div>
  <div id="sidebarRight" class="span2">...</div>
  ...
</div>

尝试:

<div class="container span12">
  ...
  <div class="wrapper clearfix span12">
    <div id="sidebarLeft" class="sidebar">...</div>
    <div id="sidebarRight" class="sidebar">...</div>
    <div id="content" class="content_block">...</div>
  </div>
  ...
</div>

然后应用您自己的样式来布置需要表现不同的区域，例如。

.sidebar {
  width: 200px;
  float: left;
}
#sidebarRight {
  float: right;
}
#content {
  margin-left: 200px;
  margin-right: 200px;
}

或类似的东西。然后，您可以使用媒体查询来隐藏 (display:none;) 或以其他方式调整布局的不同大小的自定义部分。

关于css - 使用响应式设计改造现有站点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17128515/

上一篇：css - 在 html5 音频播放器时间轴上制作样式

下一篇：css - 使 Twitter Bootstrap navbar-fixed-top 可滚动

相关文章：

html - CSS :hover for another elements

html - 如何使背景位置在响应式网站中不发生变化

css - 有什么理由不在响应式设计中通过 javascript 和媒体查询来使用用户代理检测？

css - Bootstrap 中心垂直和水平对齐

javascript - 在 Bottle(框架 jQuery)中导入 Javascript 文件

css - 创建具有多行和多列的 Html 边框

javascript - 根据用户的屏幕宽度加载不同的 &lt;/iframe&gt;

javascript - 如何将 CSS 和 JS 合并到 HTML 中

javascript - PostCss 不导入变量文件

css - 使用背景图像而不是具有响应式设计的图像有什么缺点吗？

Answer 1

我不会在无法看到您的代码的情况下解决所有问题，但让我举一个例子:

Ideally I was hoping to achieve what I was after using a framework and dived in with Twitter Bootstrap. The trouble I had was that the spans were too fluid (so the sidebars went from much wider than the content they contained to too small very easily) and the gutters were too wide.

所以我将其解释为您对网格的基本流动性很好，但您的侧边栏 div 需要表现不同。好，然后把它们从格子里拿出来，分别处理。

代替:

<div class="container span12">
  ...
  <div id="sidebarLeft"  class="span2">...</div>
  <div id="content"      class="span8">...</div>
  <div id="sidebarRight" class="span2">...</div>
  ...
</div>

尝试:

<div class="container span12">
  ...
  <div class="wrapper clearfix span12">
    <div id="sidebarLeft" class="sidebar">...</div>
    <div id="sidebarRight" class="sidebar">...</div>
    <div id="content" class="content_block">...</div>
  </div>
  ...
</div>

然后应用您自己的样式来布置需要表现不同的区域，例如。

.sidebar {
  width: 200px;
  float: left;
}
#sidebarRight {
  float: right;
}
#content {
  margin-left: 200px;
  margin-right: 200px;
}

或类似的东西。然后，您可以使用媒体查询来隐藏 (display:none;) 或以其他方式调整布局的不同大小的自定义部分。