这是我的 CSS:
html {
background: url(../images/porsche1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 25px;
}
body{
position: relative;
margin: 0;
display: block;
}
html,body{
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
header{
width: 1650px;
max-width: 100%;
margin: 0 auto;
position: relative;
background-color: white;
z-index: 10;
}
nav{
left: inherit;
right: auto;
width: auto;
}
在 1920x1080 或更低的屏幕上观看时,它看起来不错。两侧的间距很明显。然而,在更高分辨率的屏幕上(笔记本电脑有 4k 显示器),导航内的元素会触及屏幕的边缘。
如何使页面在不同桌面分辨率下保持一致?
最佳答案
您的问题是,您正在使用可变分辨率的 JPEG 文件作为背景。 porche.jpg
在 1080p 下可能看起来不错,但在 4K 下,您的浏览器可能会缩放 porche.jpg
以适应 4K 空间。放大的 JPEG 图像从来都不是一件好事。
不仅如此,您在 1080p 和 4K 分辨率下都有 25 像素的填充。我不知道您的显示器有多大,但是,如果我没记错的话,4K 显示器的 DPI 高于 1080p 显示器。在这种情况下,我会改变这一点...
padding-top: 25px;
进入这个(希望 CSS 采用 float 百分比,如果没有,使用 2%
)...
padding-top: 2.314815%
此外,您的页眉宽度明确设置为 1650px
。这在 1080p 下可能没问题,但在较低的分辨率下,这可能会发生裁剪,而在较高分辨率下,这将不是所需的宽度。
我会改变这个...
width: 1650px;
为此:
width: 85.9375%;
我不是图形设计师,但是,如果您可以避免使用固定的像素大小,那就这样做吧。这样,您就可以适应各种不同的屏幕尺寸。
关于html - 网页在 1080 分辨率下看起来不错,但更高的分辨率在元素上似乎为 "zoom in",因此两侧没有填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31644470/