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

两栏显示，左边栏有重要的东西-右边栏没那么重要

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

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

我似乎无法实现这一点，我在我的媒体查询中尝试了（左栏是主栏）：

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

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

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

---

感谢您的建议。

如果要在媒体查询中执行类似操作，该怎么办：

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

理想情况下，

main

占据设备宽度的100%，侧边栏显示在滚动条上