从宽屏幕到小屏幕的 Css 降级(液体)布局

Question

我被困在我正在处理的网站的 css 布局上。它是一个报告工具，将在宽屏显示器和上网本上使用。该站点已完成，除了可以从(非常)宽屏格式很好地降级为窄(上网本)格式的样式表。

这是它在宽屏上的显示方式: http://s1.postimage.org/1d67kaxdw/pageverywide.png

对于窄屏幕: http://s1.postimage.org/1d65wrkw4/pagenarrow.png

我希望它在狭窄的图片中退化为右边的，但我认为左边的会更可行。

我知道我可以根据屏幕尺寸进行有条件的 css 加载，但我希望它只是一个样式表。问题的核心是我希望正确的(图形)内容是垂直的，并且在宽的时候居中于页面的一部分，但是当没有空间显示它时，然后在表格上方/下方居中和水平。垂直滚动没问题。红色边的 table 是动态高度的，这也是一个问题。

我有一个布局，可以按照描述将正确的图形数据居中，但无法弄清楚如何将其从垂直方向强制为水平方向，反之亦然。如何使用单个 CSS 表来完成此操作？

Answer 1

I know I can do a conditional css load depending on the screen size, but I would like it to just be one stylesheet.

你可以做的是调查media queries ，CSS3 中引入的新功能。它们允许您根据屏幕大小、1 个文件和无 javascript 指定一组特定规则。

举个例子

@media screen and (max-width: 600px) {
    .graphs{
       /* change position */
    }
}