为媒体查询优化 css

Question

早上好，

我为我的网站创建了一个媒体查询。我感觉它正在减慢我的网站，因为它没有优化。 在手机上，我有一个特定的图像。对于平板电脑和台式机，我要显示另一个图像。 我的媒体查询工作得很好。但它没有优化。 谁能帮我优化一下？

这是查询：

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 100vh;
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}

Answer 1

请使用此 CSS 代码。
在媒体查询中，在查询之外定义的样式会被继承。
所以我的代码和你的完全一样，但是代码已经大大减少了。

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}
.Frontpage-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}

您可以查看this answer。

Answer 2

这里有一些优化技巧

1. 使用小尺寸图片
2. 使用小尺寸视频或从 YouTube 或 Vimeo 嵌入视频
3. 压缩此 CSS 代码。