是否可以在CSS样式表中设置I-Frame源代码

Question

我有一个利用媒体查询的CSS样式表。我的主页只是一个 100% x 100% 的背景图像，我想在其上放置一个居中的 iframe，它将有一个基于媒体查询结果的来源。

例如：

.CSS

@media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px)
.frame1{
 position:absolute;
 width:390px;  
 left:50%;
 margin-left:-195px;
 }

.HTML

 <iframe class="frame1"></iframe>

因此，宽度范围为 400px 到 500px，对于此范围内的任何屏幕，内容都将位于居中的 iframe 中，更宽的屏幕具有更大的背景图像可见余量。现在我的问题是我希望 iframe 源根据屏幕尺寸而变化，这样我就可以在小屏幕上将源作为移动.htm(显示非常基本的网站版本(，在普通屏幕上使用标准.htm(中档版本(和大屏幕上的大.htm(包括附加内容(。

但是，我无法得到任何我想过这样做的东西。我假设由媒体查询确定，它必须是 CSS 中列出的 iframe 的属性？我已经尝试了以下每种组合：

帧源：__.htm;

iframe src： _.htm;

帧 src： url(___.htm(;

iframe src： url(___.htm(;

帧 src： url (">__.htm"(;

等。

*下划线是页面名称。

但到目前为止没有任何效果。

有谁知道这是否可能？如果是这样，怎么办？请温和地解释我对此很陌生，尝试自学，学习我需要的点点滴滴，以实现我想要的东西......到目前为止进展顺利，但已经让我难倒了好几天了！

Answer 1

您可以根据属性进行匹配，但不能仅使用 CSS 设置属性¹

但是，您可以使用一小段 JavaScript 来检测媒体查询的结果(尽管是间接的(：

• 使用媒体查询将属性值应用于IFRAME
• 使用 JavaScript 选择具有该属性值的元素(jQuery 选择器将为此工作，尽管可能涉及一些迭代(
• 相应地更新src

但是，媒体查询和JavaScript之间实际上没有直接关联。来自一篇关于将媒体查询与 JS 配对的文章：

据我所知，无法直接访问媒体查询 JavaScript。您无法读出上面的示例媒体查询是否 是否开火。

全文建议了一些基于脚本的解决方法，以从脚本返回与媒体查询结果一致的结果。

^{1 - 至少不是以广泛支持的基于标准的方式。有一些黑客可以使用IE专有表达式在CSS中执行代码(所有这些现在都已弃用(。}