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

Question

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

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

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

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

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

然而，它似乎继续在媒体查询之前获取CSS中早先定义的main的宽度。是的，媒体查询是活动的，我将主体设置为不同的背景颜色，以确保。

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

感谢您的建议。

Answer 1

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

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

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