Question

我有一个使用媒体查询的CSS样式表。我的主页只是一个100％x 100％的背景图片我想要定位一个居中的iframe，它将有一个基于媒体查询结果的来源。

EG：

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的属性？我尝试过各种组合：

frame src： __ .htm;

iframe src： _ .htm;

frame src：url（ _ __ .htm）;

iframe src：url（ _ __ .htm）;

frame src：url（“ _ _ .htm”）;

等

*下划线是页面名称。

但到目前为止没有任何作用。

有人知道这是否可行？如果是这样的话？请温柔地解释我对此非常陌生，尝试自我教导，因为我需要它们来实现我想要的东西......到目前为止一直很顺利，但是让我难过好几天了！

Answer 1

你可以match based on attribute但是你不能仅使用CSS ¹

来设置属性

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

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

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

据我所知，无法直接访问媒体查询 JavaScript的。您无法读出上面的示例媒体查询已经解雇了。

Full Article建议使用一些基于脚本的解决方法来返回脚本中与媒体查询结果一致的结果。

^{1 - 至少不是基于标准的方式得到广泛支持。使用IE专有表达式在CSS中执行代码是很糟糕的（所有这些都已被弃用）。}

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

1 个答案: