javascript - 具有多种宽度的元素

Question

是否可以为对象(例如 div 或 img)提供多个宽度？这样一个对象的正常宽度是 720 像素，但是当用户的屏幕尺寸小于 720 像素时，元素会自动将其宽度更改为 100%？

如果有一个只使用 HTML 或 CSS 并且不包含任何 JavaScript 的解决方案就好了，因为我对它不是很熟悉。 (但如果 JavaScript 是实现此目的的唯一方法，或者使用 JavaScript 真的很容易，请像我 5 岁一样解释)

Answer 1

是的，一种可能的方法是使用 max-width 和 width:

.foo {
  max-width: 720px;
  width: 100%;
}

如果你想有很多不同的宽度，根据不同的屏幕尺寸，CSS media queries是要走的路，正如另一个答案中所解释的那样。