html - 网页在 1080 分辨率下看起来不错，但更高的分辨率在元素上似乎为 "zoom in"，因此两侧没有填充

Question

这是我的 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 显示器)，导航内的元素会触及屏幕的边缘。

如何使页面在不同桌面分辨率下保持一致？

Answer 1

您的问题是，您正在使用可变分辨率的 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%;

我不是图形设计师，但是，如果您可以避免使用固定的像素大小，那就这样做吧。这样，您就可以适应各种不同的屏幕尺寸。