该视频中有关响应式设计的某些问题

Question

所以，我在看这个视频了解自适应设计和一些在视频困扰着我。 在2:59，他将窗口升到大屏幕，然后刷新，然后Safari下载banner_large.jpg ，当他对中，小屏幕尺寸进行相同操作时，Safari分别下载了banner_medium.jpg和banner_small.jpg 。 但是随后人们可以看到他能够调整浏览器的大小，并且横幅也会相应更改（请注意在达到阈值时图像的“跳转”）。 所以问题是，如果Safari不下载其他两张图片，那么如何显示它们？ 我在这里想念什么吗？

Answer 1

他在Web Inspector选择了“ Network Requests部分。 这只会在页面向服务器发送请求以获取文件时向您显示。 他已经在视频的开头调整了页面的大小，当时该页面会要求文件（假设它们没有从上一次缓存到文件）。 因此，假设打开了缓存，当他在检查器打开的情况下调整页面大小时，它将不会再次请求文件。

为了显示文件大小，他刷新了页面，这迫使浏览器重新下载所有文件并将其显示在Web Inspector 。 您可以说他正在这样做，因为当他第一次打开“ Network Requests部分时，它是空的（因为没有请求任何内容）。 之后，他说：“然后点击重新加载”，然后他重新加载页面，该页面显示了正在下载页面上的所有文件。 您可以知道它们都已重新下载，因为在“已Cached列中，对所有文件都说“ No ，并且正在显示index.html和其他本应缓存的文件（例如css文件和背景渐变）的内容。