了解通过响应式web设计更改内容

Question

我一直在尝试学习如何使用响应式网页设计来设计网页。我遇到了一个我不理解的有趣的例子：

http://www.sixty-nine.us/collections/general/

在桌面上的此页面上，您将看到gif，但当您将浏览器缩小到足够大时，您将看到静态图像。

我认为在响应式网页设计中，这种类型的内容改变是不可能的，因为它只能控制样式，而不能控制内容。我希望有人能告诉我这里到底发生了什么，以及我对响应式网页设计不改变内容的限制的概念是否正确。

Answer 1

任何响应式设计都基于@media CSS查询，您可以选择在不同屏幕尺寸的元素上应用哪种样式(CSS方法)。

或者使用一些JS代码来监控窗口宽度，并显示/隐藏一些元素或做它应该做的事情。(JS方法)

Answer 2

他们实际上是在循环videos，而不是gif。如果分辨率低，视频将被隐藏，并使用display:none显示jpg。检查样式表的末尾：http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575

他们使用@media来控制它在不同设备上的显示方式。点击此处了解更多关于@media的信息：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

响应式网页设计是互联网上各种各样的信息，这些信息是抽象的、哲学的和轶事的。