1

我有一个使用媒体查询的 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 源根据屏幕大小而改变，所以我可以在小屏幕上将源作为 mobile.htm（显示网站的非常基本版本），在标准.htm（中级版本）上大屏幕上的平均屏幕和 large.htm（包括其他内容）。

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

帧源：__ .htm；

iframe 源代码：_ .htm；

框架源：url（_ __ .htm）；

iframe src: url( _ __ .htm);

框架源：url（“ _ _ .htm”）；

等等

*下划线为页面名称。

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

有谁知道这是否可能？如果有怎么办？并且请温柔地解释我对此很陌生，在我前进的过程中尝试自学并学习零碎的东西，因为我需要它们来实现我想要的......到目前为止进展顺利，但让我难过几天了！

4

1 回答 1

1

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

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

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

然而，媒体查询和 JavaScript 之间并没有直接的关联。来自一篇关于将媒体查询与 JS 配对的文章：

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

全文建议一些基于脚本的变通方法来从脚本返回与媒体查询结果一致的结果。

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

于 2012-05-19T14:40:39.793 回答