使标题响应不同的屏幕分辨率答案

【问题标题】：Make header responsive for different screen resolutions使标题响应不同的屏幕分辨率
【发布时间】：2017-12-06 03:52:46
【问题描述】：

我正在尝试使标题响应。目前标题是固定的，当您从不同的屏幕分辨率查看它时，它看起来不太好。

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

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

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

谢谢

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身见How to create a Minimal, Complete, and Verifiable example
鉴于您的代码 sn-p 没有运行，屏幕截图或其他可视化帮助显示它现在的样子（以及类似于您希望它的外观的示例）将帮助我们回答你的问题。

标签： css wordpress header responsive screen-resolution

【解决方案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 中对其进行硬编码。无论哪种方式。

【讨论】：

不是整个网站的背景图片。它仅用于此代码所在的标题：#tie-wrapper #theme-header
修复了 CSS 选择器。
如果这对你有用，你能把它标记为答案吗？
我必须为每个屏幕分辨率都这样做。花了一些时间，但我做到了。
您使用了多少种不同的屏幕分辨率？我通常只使用上述（或接近的数字）来定位桌面、平板电脑和移动设备。