javascript - 使用 CSS 媒体查询选择 JavaScript 元素

Question

我正在一个网站上工作，该网站将提供一个单页，一个用 Adob​​e Edge 制作的幻灯片（导出为.jsJavaScript 文件）。我还使用 CSS 媒体查询来调整网站上各种元素的大小，例如<div>基于屏幕分辨率的 s 和字体。我想为幻灯片做的是创建不同分辨率的多个版本；是否可以使用 CSS 媒体查询随后为每个屏幕分辨率选择适当的版本？

Answer 1

读回已知 CSS 声明的值，例如主外部元素的宽度。根据您在媒体查询中设置的 CSS，此值会有所不同。有了这个，你可以设置一个 JS 变量来确定使用哪个版本。

Answer 2

为不同的图像分辨率定义不同的尺寸，如下所示：

@media only screen and (min-width:768px) and (max-width:1009px)

在媒体查询中，您将根据屏幕分辨率为不同元素定义不同的值。