我必须为我的 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;
最佳答案
在 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;
}
关于html - 为什么一张图片适合我的个人电脑,但在不同的电脑上尺寸不一样? HTML/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29358683/