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

Question

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

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

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

我似乎无法让它工作，我在我的媒体查询中尝试过的(左列是主要的):

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

然而，在媒体查询之前，它似乎一直在为 CSS 中早先定义的 main 选择宽度。是的，媒体查询处于事件状态，我将正文设置为不同的背景颜色以确保。

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

感谢您的建议。

Answer 1

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

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

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