Question

我想提供包含两个div的网页，这些div是固定大小的（不依赖于浏览器窗口大小）。但是，对于不同的屏幕分辨率（1920x1080 vs 1440x900），大小应该不同。基本上，如果用户最大化浏览器窗口，他将看到整个网页。

一个例子：

对于1920x1080：div的宽度为1600 对于1400x900：div的宽度为1000

最简单的方法是什么？

#group {
    position: absolute; 
    top: 300px; left: 0; 
    bottom: 0; 
    width: 410px; height: 440px;
    background: black; 
    display:inline-block;
}

#batch {
    position: absolute; 
    top: 10px; right: 10;
    bottom:0; left:420px; 
    width: 1225px; height: 820px; 
    background: black; 
}

Answer 1

如果我理解正确，您需要使用使用min-device-width的媒体查询：

＆＃13;

body::before {
  content: "tiny screen";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
@media screen and (min-device-width: 1024px) {
  body::before {
    content: "1024px or higher";
  }
}
@media screen and (min-device-width: 1366px) {
  body::before {
    content: "1366px or higher";
  }
}
@media screen and (min-device-width: 1440px) {
  body::before {
    content: "1440px or higher";
  }
}
@media screen and (min-device-width: 1920px) {
  body::before {
    content: "1920px or higher";
  }
}

＆＃13;

<center>
  <p>The screen size reported above will not change when you resize the browser.</p>
</center>

＆＃13;

注意：您应该将CSS规则放在这些块中。

Answer 2

您可以根据屏幕尺寸使用媒体查询。类似下面的例子。

nextInt()

固定尺寸元素基于屏幕分辨率

2 个答案: