html - 为什么一张图片适合我的个人电脑，但在不同的电脑上尺寸不一样？ HTML/CSS

Question

我必须为我的 html 类(class)制作一个网站。当我在电脑上打开页面时，图像符合我的要求。但是当我尝试在学校计算机上打开它时，它只是我预期的 50%。我猜是因为不同的屏幕分辨率。我如何让它适用于所有分辨率？这是一张照片。 http://i.imgur.com/7YsCSpa.png

顶部的 Logo 保留在原位，但粉红色条不会。它不会填满整个屏幕。我的 html 是 <div id="headbar">
<img src="headbar.png" alt="bar" />
</div>

我的CSS是

#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;

Answer 1

在 CSS 中使用媒体查询。

示例:

@media (min-width: 1200px) and (max-width: 1400px) { 

#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;

}

@media (min-width: 800px) and (max-width: 1200px) { 

#headbar {
position: fixed;
margin-top: 35px;
width: 100%;
z-index: -1;
background-attachment: fixed;

}