html - 如何防止最小宽度覆盖最大宽度？

Question

我创建了一个 div，我希望它是 50%(为了论证)，但至少有一定的宽度，最多 100% 的宽度，(这样它就不会扩展窗口)

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width: 500px;
    max-width: 100%;
}

基本上，我希望最小宽度起作用，但我希望最大宽度被认为更重要，以便它永远不会比窗口宽，我假设我可以按顺序执行此操作，或者至少通过使用 !important，但事实并非如此

https://jsfiddle.net/ex716kam/2/

Answer 1

我已经尝试了几次，但我似乎无法让它单独使用 CSS。我建议使用简单的 javascript 或媒体查询来使其工作。

Working jsFiddle

@media screen and (min-width:1000px){
    .about{
        width:50%;
    }
}

请注意@lmgonzalves 写的关于最小宽度是“最强”的内容。