CSS：如何设置被最大宽度覆盖的最小宽度？

Question

从this question开始，我知道最小宽度优先于最大宽度。

我的问题是如何实现以下目标：

我希望div的宽度为50％，但宽度不小于350px，除非视口宽度小于350px，在这种情况下，我希望最大宽度为100％。

如果我使用以下内容：

.half-right {width: 50%; float: right; padding: 2em 4em; min-width: 300px; max-width: 100%;}

最小宽度优先于最大宽度，并且在宽度的100％之外有一些渗色。

帮助表示赞赏。

Answer 1

添加媒体查询

@media screen and (max-width: 350px) {
    .half-right{
        width: 100%;
    }
}