3

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

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

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

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

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

  • 所有三列可见（800px 及以上）
  • 内容和右侧边栏（广告）并排可见，左侧边栏（统计）在画布外（799px 及以下）
  • 内容和右侧边栏堆叠和左侧边栏关闭画布（可能 479 像素和更低 - 但实际上它会在内容变得太窄的地方）

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

我希望使两个侧边栏的宽度尽可能固定，否则左侧的内容可能会脱节。

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

理想情况下，我希望侧边栏在作为列可见时具有匹配的高度和背景颜色，无需修改即可实现（实际上选择不使用宽边框或图像的背景颜色）。

那就没什么好问的了，嗯？

我已经阅读了很多关于我想要实现的每件事的不同建议，其中大部分都没有问题，并且在以前的某个时候已经完成了很多。我遇到的麻烦是让它们一起工作。

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

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

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

那么，实现我所追求的最佳方式是什么？我是尝试使用比 Bootstrap 更灵活的框架还是尝试手动编码？如果是后者，我是从移动布局开始，然后通过更高的断点工作，还是从全屏开始（因为在等高和彩色列的情况下最难实现），然后通过分辨率向下工作？

或者还有其他任何人都可以建议的方法吗？我愿意接受任何建议，最好尽可能基于 CSS，但如果认为这是最好的方法，我会非常乐意使用一些 JS。

4

2 回答 2

3

如果无法查看您的代码，我不会解决所有问题，但让我举一个例子：

理想情况下，我希望在使用框架并使用 Twitter Bootstrap 之后实现我的目标。我遇到的麻烦是跨度太流畅（所以侧边栏从比它们包含的内容宽得多很容易变得太小）并且排水沟太宽。

因此，我将此解释为您对网格的基本流动性很好，但您的侧边栏 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;) 或以不同的大小调整布局的自定义部分。

于 2013-06-15T23:19:05.467 回答
0

我认为 Bootstrap 太重了——如果你要转换一个已有的网站，使用 Bootstrap 只会给你带来更多的问题。我发现，除非您愿意完全自定义 Bootstrap.css 以使其完全适合您，否则您将在设计时考虑到许多 Bootstrap 约定。对 Bootstrap 的“相同性”有很多批评，您可以从 1000 个网站看起来相同的事实中看出这一点（您知道 Jumbotron 滑块，带有导航菜单、英雄单位等）。

在我看来，您有几个选择 -

  1. 使用诸如 Zurb Foundation 或 Groundwork CSS 之类的框架，它们的侵入性稍小。
  2. 使用媒体查询手动编码您网站的几个不同“版本”（我喜欢做的是在主 div 中定义单独的内容区域 [即一个 div 将被称为“iphone”，另一个将被称为“桌面”，然后隐藏它们与媒体查询]）。
  3. 使用流体网格系统并将您的内容完全重构到该网格系统中。在我看来，一个好的流体网格系统（不是框架本身）应该是 960 网格系统（http://960.gs/），或者您可以使用 Bootstrap 网站上的自定义功能将其缩减为仅你需要的元素。
  4. 然后当然第三个选项是隐藏您当前网站的某些元素，即边栏设置为display:none;媒体查询。

媒体查询

但是，Bootstrap 确实建议从一组好的 CSS 媒体查询开始。例如，使用 Bootstrap 推荐的查询集，以下是我设想您的网站的设置方式：

/* Large desktop */
@media (min-width: 1200px) {
.iphone {display:none;}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.iphone {display:none;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

.main {display:none;}

.iphone {
display:block;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
width:100%;
}
}

/* Landscape phones and down */
@media (max-width: 480px) {
.main {display:none;}
/* whatever code you want to put here for landscape viewing of the website on a mobile (if you need it)*/
}
于 2013-06-15T23:07:29.387 回答