为媒体查询优化 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");
    }
}

您可以检查。

Answer 2

这里有一些优化技巧

使用小尺寸图片
使用小尺寸视频或从 YouTube 或 Vimeo 嵌入它们
压缩此 CSS 代码。

为媒体查询优化 css

Optimizing css for a media query

css

media-queries