我想知道媒体查询如何 react 。
例如，我为基本媒体放置了一张尺寸为 1400px 到 500px 的图片，另一张尺寸为 450px 的图片为 200px 适用于移动设备。
我在同一 html 页面中使用媒体查询调用它。当用户在移动设备中打开它时，我想显示小图像。
如果我为同一张图片调用两个 CSS(即根据媒体使用 css 更改背景)，我的大图片是否会加载到移动设备中？或者它只会加载小图像而忽略大图像？ 我已将主 CSS 放在移动 CSS 之前。我认为必须加载大图像。如果是这样，那么我的网站将在移动设备上运行缓慢。
你怎么看？
最佳答案
不会，大图不会显示在移动设备上，只要你将它插入到排除它的媒体查询中。但如果您以这种方式组织 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 的设备解释。
您可以使用不同的方法来阻止下载这两个图像。
很大程度上取决于您网站的目标。如果移动版本使用最广泛，您应该开始规划，然后通过媒体查询逐渐添加桌面版本的内容。
以下是您会发现有用的一些资源:
关于css - 媒体查询如何 react ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12757480/