Question

我被困在我正在处理的网站的CSS布局上。它是一种报告工具，可用于宽屏显示器和上网本。该网站已完成，但样式表可以很好地从（非常）宽屏格式降级到窄（上网本）格式。

我希望它在狭窄的图片中降级为正确的，但我认为左边的那个会更可行。

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

我有一个布局，如所描述的那样使正确的图形数据居中，但无法弄清楚如何从垂直方向强制它，反之亦然。如何使用单个css表来实现此目的？

Answer 1

我知道我可以做一个有条件的css加载取决于屏幕尺寸，但我我希望它只是一个样式表。

你可以做的是研究{3}中引入的新功能media queries。它们允许您根据屏幕大小，1个文件和没有javascript来定义一组特定规则。

这是一个例子

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