1

我正在使用自适应布局在站点上工作，这意味着站点会适应用户屏幕宽度。有三张图片说明了我的想法，图片显示了浏览器窗口从宽到窄调整大小的三个步骤。

宽屏 ，紫色区域贴在页面左侧，绿色区域适合屏幕的其余部分。

宽屏

中等屏幕 绿色区域达到其最小宽度 中屏

窄屏 绿区跳下紫区

窄屏

我使用以下样式

.purple_block {
    float: left;
    width: 751px;
    height: 504px;
    margin: 0 35px 100px 0;
}

.green_block{
    min-width: 400px;
}

但是这个“最小宽度”不起作用，因为绿色块的宽度是从紫色区域的左边缘到绿色区域的右边缘计算的。

如何实现所需的行为？

更新 紫色块应该总是固定的（它实际上是一个项目库）。绿色块应该有紫色块的边距，看起来像一个适合所有剩余空间的列（它是一个项目描述：几段文本+链接）。当用户缩小其浏览器时，绿色块也会变窄。当绿色块达到其最小宽度时，它会跳到紫色块下方。

4

1 回答 1

2

看起来您需要特定于屏幕大小的 CSS。您可以通过使用来定义它

@media only screen and (max-width: ...px) { ... }

因此，对于每个状态（您的单个图像显示它们），您定义应该在该浏览器窗口宽度处更改的 CSS。

例如

@media only screen and (max-width: 1000px) {
    .purple_block {
        float: none;
        width: 100%;
        height: 504px;
        margin: 0 35px 100px 0;
    }

    .green_block{
        width: 100%;
        height: 300px;
    }
}

等等。

于 2012-08-16T12:55:10.080 回答