如何？最小宽度、宽度和最大宽度（css）答案

【问题标题】：How to? Min-width, width and max-width (css)如何？最小宽度、宽度和最大宽度（css）
【发布时间】：2014-03-03 19:34:53
【问题描述】：

我的主 div 设置为

max-width:600px;

但是，当内容不够长时，div 会根据内容的长度调整大小。这是有道理的。

所以我改为声明：

  width:600px;
  max-width:600px;

但是现在，当您调整窗口大小时，div 不会缩小。我尝试设置最小宽度：

  min-width:200px;
  width:600px;
  max-width:600px;

但它仍然不会缩小超过 600 像素（在窗口调整大小时）；

那么我错过了什么？我可以同时使用所有 3 个宽度设置吗？ (最小宽度,宽度,最大宽度)?

如果是这样，怎么做？我正在尝试理解其中的逻辑。

我希望内容拉伸到 600 像素，但在窗口调整大小时也要缩小。

【问题讨论】：

标签： css

【解决方案1】：

我想你想要

width: 600px;
max-width: 100%;

这样，元素将尝试具有600px 的宽度。但是如果父级不够宽，就会更小。

【讨论】：

【解决方案2】：

只要去掉“width: 600px”，如果浏览器窗口足够大，div就会是600px，否则如果浏览器窗口小于600px，它会调整到你的最小宽度。

【讨论】：

【解决方案3】：

您可以使用媒体查询为某些屏幕尺寸应用宽度

.div {
    width: 600px;
}

@media screen and (max-width 600px) {
    .div {
        width: 100%;
    }
}

【讨论】：