最小化浏览器窗口时的常量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;
  }
}

Answer 2

使用％可以使div自适应，但如果有任何图像或固定宽度的元素它不会自适应，则在div的内侧，你需要使用媒体查询使它们自适应

例如：

/* Small Mobile Devices ( < 768px ) Style Begin */
 @media (min-width: 0px) and (max-width: 767px) {

   .div-elements-name {
   width:100%;
}

}