问题标签 [fluid-layout]

在我开始开发网站之前，这篇文章不是关于代码语法，而是关于工作策略。

如果我需要为智能手机（Android { 3 个不同尺寸}、iphone {2 个不同尺寸} 和其他非智能手机）设计移动网站的前端，我应该如何进行？（我的设计必须对所有这些设备都有效并且相同）

1-我是否应该按照关于灵活图像和流体网格（灵活 DIV：s）的想法来设计我的作品。

或者

2-为每个目标模型设置不同的媒体查询大小？（这个解决方案可能会创造更多的开发工作，不是吗？）

非常感谢你的想法...

我正在尝试基于 Golden Grid System 构建一个流畅的布局网站，而不限制 IE7。

我得到了一个不需要的身体水平滚动条。如果我强制宽度变小，它会消失。但是，它不会是流动的。

布局看起来不错，只是右侧一些不需要的间距，我无法解释导致水平滚动条的原因。

假设我有一个这样的标记：

#container 居中并固定在 1000px，#header 和 #footer 为 1000px，#content-left 和 #content-right 向左浮动，各 500px。

如果容器是固定的，如何将页眉和页脚背景颜色扩展到浏览器窗口的全长？

假设我有 40 个 div 想要分成几列。而且我希望每列中的 div 数量根据视口高度进行缩放。

因此，例如，如果视口高度为 1000 像素，则每列可能有 10 个 div。如果将其大小调整为 500px 高，则每列将有 5 个 div。

这可以完全用 CSS（和@media 查询）来完成吗？

我正在构建基于960 Grid System的布局。我喜欢固定 (px) 版本，但想使用流体 (%) 版本并在其周围包裹一个固定大小的 div。

问题是这不适用于所有浏览器：

• FF 7：有效
• IE6 - 9：工作
• 铬：糟透了
• Safari：糟透了
• iPad/iPhone：糟透了
• 歌剧：糟透了

为了明白我的意思，我做了一个小页面。单击切换按钮以更改为相对。它应该看起来一样，但不是:(

有什么想法吗？

我正在尝试使用收缩包装的左栏和流畅的主面板来实现设计，这将允许显示尽可能多的图片作为窗口宽度将容纳，而没有水平滚动条。

我在这样做时遇到了很大的麻烦。当我浮动：离开控制栏时，主面板的内容开始围绕它流动。浮动主面板也解决了这个问题，但会导致内容被收缩包装，这意味着图像倾向于排成一列。

有什么优雅的解决方案可以做到这一点吗？

我在这里做了一个问题的模型：http: //jsfiddle.net/PYKwg/2/embedded/result/

在为流体布局和可调整大小的文本网页设置样式时，您必须始终牢记相关的字体大小（对于 em 的单位）和包含当前样式元素的块宽度（百分比单位）。总是需要注意哪个是父元素的宽度，或者您是否已经修改了当前元素或其祖先之一的字体大小，这是一个宽松的时间。

使用动态样式表（如 Sass 或 Less）很容易实现 mixins 或函数，它们关心 em 和百分比计算（简单除法）背后的数学，所以你可以以像素为单位写大小而忘记翻译，但无论如何你有提供相关的字体大小和包含块宽度，因为据我所知，无法自动检测它们。

你知道是否有某种类型的实用程序可以实现自动化吗？是否已经做出某种努力以某种方式实现它？

我正在设计一个流畅的布局（没有固定的 px，全部以 % 为单位）

我有HTML；

如果我在 Firebug 中签入，则父级的高度计算为 400px ..但是如果我给子级作为 height:100%，它不会占用整个高度..

我该如何解决？

我有一个用于 CSS 精灵的背景图片

现在的问题是我只能使用流体布局（只有 %，没有 px）并且 % 定位在调整浏览器大小时会产生问题（例如，显示其他箭头的某些部分）

我该如何解决 ？我可以获得一个如何使用 % 定位作为背景的示例吗？

我正在计划一个基于流体设计的布局，其中包含 2 个列，如下所示；

下面是 HTML 代码：

这里第一列包含标题文本的图像，剩余宽度用于其他内容。

现在我的问题是，因为这是一个流畅的布局，我不能在任何地方使用“px”宽度......我定义img为使用max-width:100%，但是当第 2 列高度更高时，那种会在 titleText 图像下方创建空白空间（或间隙）。

如何定义我的 CSS，以便页面在调整浏览器大小时能够很好地缩放。我的意思是，无论浏览器大小如何，titleText 图像都会显示为占据整个高度，作为第二列的内容高度。

同样，我不能在我的 CSS 中使用 px 宽度或高度。所以我不能说，宽度：200px；高度：100px