在CSS中，如何使彩色背景至少为页面宽度的50%，最多为90%，并根据需要尽可能宽

Question

在CSS中，如何使彩色背景至少为页面宽度的50%，最多为90%，并根据需要尽可能宽？

<pre><code> .....................
adsfdasgsfdgsfdgfsdgdsfg
adgsfdgfsdgsfd
</code></pre>

Answer 1

HTML

<pre class="somebackground"><code>...</code></pre>

.CSS

<style type="text/css">
.somebackground {
 background:red;
 display:inline-block; /* Changes block elements to only be 50% */
 min-width:50%;
 max-width:90%;
}
</style>

参见 jsFiddle 演示。

Answer 2

您可能想尝试最大宽度和最小宽度。

因此，您可以将最小宽度设置为 50%，将最大宽度设置为 90%。

这样，您的元素将始终介于 50% 到 90% 之间（包含）。