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

我已经创建了一个div，我希望它是50%（为了参数），但至少是一个特定的宽度，最多是100%的宽度（这样它就不会扩展窗口）

基本上，我希望最小宽度起作用，但我希望最大宽度被认为更重要，这样它就永远不会比窗口宽，我假设我可以按顺序来做，或者至少使用！很重要，但事实似乎并非如此

---

我尝试了几次，但似乎无法单独使用CSS。 我建议使用简单的javascript或媒体查询来实现它

---

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

而不是

最大宽度：100%使用<代码>最大宽度：100vw。它不会离开您的窗口。
很难知道您希望在1000px到500px之间出现什么行为，但媒体查询是实现您所需的最简单的方法：


。关于{
位置：绝对位置；
右：0；
宽度：50%；
最小宽度：500px；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.关于{
宽度：100%；
最小宽度：0；
}
}

关于

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

尝试此代码，当屏幕宽度在500px到100%屏幕分辨率之间时，此代码将起作用

@media (min-width: 500px) and (max-width: 800px)
{
.about {
        position:absolute;
        right:0;
        width: 50%;
    }
}

只需切换最小宽度和宽度的值：

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

属性
minwidth
的值覆盖
max width
和
width
。了解更多。好吧，我很困惑。您希望div的正确率为50%。但“至少一定宽度”的意思是不低于一定宽度。正确的。这就是发生的情况，那么问题出在哪里。那么，您希望div的宽度至少为500px，但永远不要超过窗口宽度？那么如果窗口小于500px会发生什么呢？如何满足“至少500px宽”的条件？你的意图在逻辑上是有缺陷的。是的，我认为媒体查询在这种情况下是可行的，但因为它是一个很好的数字，所以很容易计算出来，而且因为我使用了%，但如果单位是“他们”或其他什么，可能会有点困难。奇怪的是，即使使用内联样式或重要标记，你也不能将最小宽度优先于最大宽度，我更愿意在可能的情况下不必过多地使用媒体查询，但这似乎是最好的选择这似乎很有趣，但是我只是尝试了一下，但它并没有解决问题，你能包含一个工作的JSFIDLE吗？我在这里更改了你的CSS。只要使用这些装置，smarty就能解决您的问题。也许有点晚了，但我希望我能帮助你：）这太简单了，我觉得自己没有这个想法是愚蠢的。谢谢
@media (min-width: 500px) and (max-width: 800px)
{
.about {
        position:absolute;
        right:0;
        width: 50%;
    }
}

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