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

我想提供包含兩個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

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

回答

相關問題