当我更改屏幕分辨率时，我的整个网站都崩溃了，我该怎么办？答案

【问题标题】：When i change screen resolution my whole website falls apart, what can i do?当我更改屏幕分辨率时，我的整个网站都崩溃了，我该怎么办？
【发布时间】：2019-06-15 07:10:32
【问题描述】：

每当我使用较旧的 macbook 或计算机时，我的网站就会崩溃，页边距和背景图像就是垃圾。我知道问题出在我的背景图像上，但我真的想保留这些元素，但我没有看到另一种放入这些元素的方法。我找不到使用 CSS 放入它们的方法。

我已经尝试过分离背景图像和其他元素并通过 css 添加它们，但这不符合我的要求。

.index-background{
    background-image: url("../assets/img/index-background-3.svg");
    background-repeat: no-repeat;
    height: 425rem;
    width: 192rem;
}

我希望我的网站在任何分辨率下都看起来不错

【问题讨论】：

我们不可能通过单一的 CSS 规则解决您的问题。查看媒体查询并阅读一些教程。我也完全不知道“我已经尝试过分离卫生纸”是什么意思。

标签： html css alignment background-image margin

【解决方案1】：

@media 将在这里成为你的朋友。有了它，您可以定位不同的分辨率。

@media only screen and (min-width : 768px) and (max-width : 1024px) {
.index-background{ height: HEIGHTTHATWORKS FOR THESE RANGES;
width: WIDTHTHATWORKS; }}

如果浏览器宽度等于或介于 768px 和 1024px 之间，以上将改变 index-background 的高度和宽度。

你也可以看看这个...https://www.w3schools.com/cssref/css3_pr_background.asp。它将向您展示更改背景以按照您需要的方式填充区域的不同方式。

【讨论】：

谢谢，会调查的！