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

Question

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

我已经尝试过将背景图像和其他元素分开并通过 css 添加它们，但这超出了我的能力范围。

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

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

Answer 1

@media 将成为您的朋友。有了这个，您可以针对不同的分辨率。

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

如果浏览器宽度等于或介于 768px 和 1024px 之间，以上将更改索引背景的高度和宽度。

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

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

When i change screen resolution my whole website falls apart, what can i do?

html

css

margin

alignment

background-image