css 中是否有等同于 "initial width" 的东西

Question

我想在 div 上设置宽度，这样当它最初显示时，它会被设置为某个固定值，我称之为 "initial width"。如果用户调整浏览器的大小以缩小宽度，我希望 div 的宽度变小但仅限于最小宽度（可以用 min-width 设置）。我不能使用 width 规则来设置初始宽度，因为即使浏览器宽度变小，它也会固定在该宽度。

Answer 1

当然可以，只要使用max-width，它不会超出一定的宽度：

element {
  max-width: 450px; /* 'initial width' */
  width: 100%;
  min-width: 100px; /* 'minimum width' */
}

示例：

.resizeable {
  height: 150px;
  width: 500px;
  background: lightgrey;
  padding: 5px;
  border: 2px solid black;
  resize: horizontal;
  overflow: auto;
}

.element {
  height: 100px;
  max-width: 350px;
  width: 100%;
  min-width: 100px;
  background-color: grey;
  border: 2px solid blue;
}

<div class="resizeable"> Resize me!
  <div class="element">
    content
  </div>
</div>

css 中是否有等同于 "initial width" 的东西

Is there something equivalent to an "initial width" in css

css

width

responsive-design