html - 最小化浏览器窗口时恒定的 div 大小

Question

我将 div 元素的大小设置为 %，因为我希望它们能够适应不同设备的不同屏幕尺寸。但是，我希望设备的大小保持不变。例如，如果 div 占笔记本电脑浏览器屏幕宽度的 60%，即使我将浏览器窗口的尺寸最小化，它也应该保持 60%。

我如何实现这一目标？

Answer 1

你可能正在寻找

min-width: 800px;

如果现在宽度小于 800px，div 不会调整得更小，只会保持这个宽度。

只需确保添加如下媒体查询:

div{
  width: 60%;
}

@media (min-width: 601px) {
  div{
    min-width: 800px;
  }
}

@media (max-width: 600px) {
  div{
    min-width: 400px;
  }
}