使 header 响应不同的屏幕分辨率

Question

我正在尝试让 header 响应。目前 header 已修复，当您从不同的屏幕分辨率查看它时，它看起来不太好。

#tie-wrapper #theme-header {
    background-image: url(http://example.com/header-image.jpg);
    background-repeat: no-repeat;
}

我希望在不同的分辨率下拥有相同的图像。它应该随着网站而减少。徽标也居中，因此图像应该居中。

我真的不知道如何为不同的分辨率添加这张图片。

谢谢

Answer 1

您可以在不同的屏幕宽度上使用不同的图像 css:

@media only screen and (max-width: 1023px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_FULLWIDTH.jpg') center center/cover no-repeat;
        min-height: 500px;
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_LARGE.jpg') center center/cover no-repeat;
        min-height: 400px;
    }
}
@media only screen and (max-width: 480px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat;
        min-height: 300px;
    }
}

我通常会将此代码添加到我的模板文件中并使用 wp_get_attachement()，加载不同尺寸的图像。或者您可以在 styles.css 中对其进行硬编码。不管怎样。

使 header 响应不同的屏幕分辨率

Make header responsive for different screen resolutions

css

wordpress

header

screen-resolution

responsive