html - 流动/固定设计，侧边栏由两个元素组成

Question

我正在尝试构建一个由三个主要 block 组成的移动就绪设计，广告 block 、内容 block 和侧边栏 block (加上页眉和页脚，但这些对于这个问题并不重要)。

想法是让广告和侧边栏具有固定宽度 (250px) 并与容器 block 的右侧对齐，内容是流动的并位于左侧。在移动设备上，我需要打破这种设计并按顺序将 block 层叠在一起 ad->content->sidebar width 100% widths

我有这样的想法:

• > Desktop
• > Mobile

我见过使这项工作成功的解决方案，例如 this one , 但它们都适用于以百分比表示的相对大小，而不适用于固定的“侧边栏”宽度。

Answer 1

媒体查询允许您在特定的窗口大小下说我希望此 css 运行。例如:

.ads {
    float: right;
    width: 250px;
    margin-left: 5px;
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        margin: 0 auto;
    }
}

所以使用这个你可以根据屏幕大小控制css

示例:

http://jsfiddle.net/link2twenty/kufbbodr/

改变结果框的宽度，看看效果如何