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

Question

两列显示，左列有重要内容 - 右列不太重要。

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

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

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

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

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

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

感谢您的建议。

Answer 1

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

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

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

using device width in media query