媒体查询如何反应 [英] How does Media Queries Reacts

问题描述

我想知道媒体查询如何作出反应。

例如，我放置了大小 1400px 500px 用于基本媒体和另一张大小 450px 的图片 200px 移动设备。

我使用媒体查询在同一个html页面中调用它。

如果我为同一张图片调用两个CSS（即，使用css根据媒体更改背景），则会显示小图片我的大图像加载到移动设备？或者它会简单地加载小图像忽略较大的一个？
我把主CSS放在移动CSS之前。我认为大图像必须已经加载。

您的观点是什么？

解决方案

不，大图片不会显示在移动设备上，只要将其插入到排除媒体查询的媒体查询中即可。但是如果您按照以下方式组织CSS，则会 下载 ：

  / *第一个声明：
 BROWSER开始下载图片* / 
 .my-img-class {
 background：url（my-large-image.jpg）; 
} 
 
 / *第二个声明：
上面的规则太过分了，所以这个图像将被下载到/ * 
 @media only screen和（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）; 
} 
} 
  

上述代码只能由带屏幕的设备小于600像素。

  @media屏幕和（min-width：601px）{
 .my-img-class {
 background：url（my-large-image.jpg）; 
} 
} 
  

上述代码只能由带屏幕的设备大于600像素。

---

您可以使用不同的方法来防止下载这两张图片。

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

---

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

• CSS3媒体查询教程


• CSS媒体查询的有效示例


• CSS媒体查询&使用可用空间

I want to know how does media queries reacts.

For example, I have place an image of size 1400px by 500px for basic media and another image of size 450px by 200px for mobile device.

I am calling it in the same html page using media queries. I want to display small image when user open it in mobile device.

If I call two CSS for same image (ie. changes background using css as per media), will my big image be loaded in mobile device? Or it will simply load the small image ignoring larger one? I have put the main CSS before the mobile CSS. I think big image must have been loaded. If so, then my site will work slowly in mobile devices.

What's your view?

解决方案

No, the big picture will not be displayed on mobile devices, as long as you insert it into a media query that excludes it. But it will be downloaded if you organize your CSS this way:

/* 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);
    }
}

---

To prevent mobile devices to keep downloading the large image, you should wrap both rules into a media query.

Here's an example.

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

The code above will be interpreted only by devices with screens smaller then 600px.

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

The code above will be interpreted only by devices with screens larger then 600px.

---

You can use different approaches to prevent the downloading of both images.

Much depends on the target of your site. If the mobile version is the most widely used, you should start planning that, then add gradually, through media queries, the content for the desktop version.

---

Here are some resources that you'll find usefuls:

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

这篇关于媒体查询如何反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！