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

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

一个例子：

为1920×1080：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; 
}

来源

2015-07-10 Dzung Nguyen

我不理解所需的结果，但我认为媒体查询可以提供帮助。 – Oriol

'不同尺寸的屏幕尺寸应该不同'......尺寸不取决于浏览器窗口尺寸。对不起，你的解释让我感到困惑。 –

_大小不取决于浏览器窗口大小_你的意思是你想显示1920px版本，如果我有1920px监视器**无论浏览器窗口是否被最大化或不** **？ –

您将使用基于屏幕大小的媒体查询。就像下面的例子。

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    /* Custom CSS GOES HERE */ 
} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
    /* Custom CSS GOES HERE */ 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
    /* Custom CSS GOES HERE */ 
} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
    /* Custom CSS GOES HERE */ 
}

来源

2015-07-10 18:15:30 ja408

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

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"; 
 
    } 
 
}

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

注意：你应该把这些块中的CSS规则。

来源

2015-07-10 19:25:27

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

回答

相关问题