css - 媒体查询如何 react

Question

我想知道媒体查询如何 react 。

例如，我为基本媒体放置了一张尺寸为 1400px 到 500px 的图片，另一张尺寸为 450px 的图片为 200px 适用于移动设备。

我在同一 html 页面中使用媒体查询调用它。当用户在移动设备中打开它时，我想显示小图像。

如果我为同一张图片调用两个 CSS(即根据媒体使用 css 更改背景)，我的大图片是否会加载到移动设备中？或者它只会加载小图像而忽略大图像？我已将主 CSS 放在移动 CSS 之前。我认为必须加载大图像。如果是这样，那么我的网站将在移动设备上运行缓慢。

你怎么看？

Answer 1

不会，大图不会显示在移动设备上，只要你将它插入到排除它的媒体查询中。但如果您以这种方式组织 CSS，它将被下载:

/* FIRST DECLARATION:
    BROWSER STARTS DOWNLOADING THE IMAGE */
.my-img-class{
    background:url(my-large-image.jpg);
}

/* SECOND DECLARATION:
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */
@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

---

为了防止移动设备继续下载大图像，您应该将这两个规则包装到媒体查询中。

这是一个例子。

@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

上面的代码只会被屏幕小于 600px 的设备解释。

@media screen and (min-width: 601px) {
    .my-img-class{
        background:url(my-large-image.jpg);
    }
}

以上代码只能由屏幕大于 600px 的设备解释。

---

您可以使用不同的方法来阻止下载这两个图像。

很大程度上取决于您网站的目标。如果移动版本使用最广泛，您应该开始规划，然后通过媒体查询逐渐添加桌面版本的内容。

---

以下是您会发现有用的一些资源:

• > CSS3 Media Queries tutorial
• > Effective Example of CSS Media Queries
• > CSS Media Queries & Using Available Space