在媒体查询中使用设备宽度

Question

两列显示，左列有重要的东西 - 右列不那么重要。

在设备宽度小于 X 的移动设备上我想要的是 -

左列的宽度设置为设备宽度 右列的宽度设置为设备宽度的 50% 或 270 像素，以较小者为准。

我似乎无法让它工作，我在媒体查询中尝试过（左列是主列）：

main {
float: left;
width: device-width;
}

但是，它似乎一直在获取媒体查询之前 CSS 中定义的 main 的宽度。是的，媒体查询处于活动状态，我将正文设置为不同的背景颜色以确保。

如何指定容器相对于设备宽度的宽度？主 div 为 100% 设备宽度，侧 div 为 50% 设备宽度。

感谢您的建议。

Answer 1

如果在媒体查询中做这样的事情会怎样：

body {
    width: @device-width + 270px;
}

理想情况下main 占据设备宽度的 100%，侧边栏在滚动时显示。