我当时正在做一些网页设计，心想“嘿，如果我们可以将 CSS 媒体查询应用于块元素（即div, section， ETC。）？”
说真的，如果我们能够拥有此功能，我们可以制作一些非常令人惊叹的流体布局。在这篇文章中，我将使用一个简单的社交插件，我可以将其实现到我的任何页面的侧边栏中，该侧边栏可以根据其父 div 大小进行流动。这很方便，所以我可以调整我的小部件的大小，无论它是实现为 500px 列还是 300px 列，这样我就不必为它实现的每个布局编写特定的样式表。
该设计
>=500px <500px
_______________________________ ____________________
| | | |
____________________ ______ ______
| | | | | |
| LIKE ON FACEBOOK | | ICON | | ICON |
|____________________| |______| |______|
____________________ ______ ____________________
| | | | | |
| FOLLOW ON TWITTER | | ICON | | LIKE ON FACEBOOK |
|____________________| |______| |____________________|
______
| |
| ICON |
|______|
____________________
| |
| FOLLOW ON TWITTER |
|____________________|
HTML 标记
<div class="widget clearfix">
<div class="social">
<div class="social-right">ICON</div>
<div class="social-left">Like on Facebook</div>
</div>
<div class="social">
<div class="social-right">ICON</div>
<div class="social-left">Follow on Twitter</div>
</div>
</div>
The CSS
现在是 css 元素媒体查询部分。这不是有效的 CSS，但却是我想要实现的目标。本质上只是一个基于父元素而不是整个浏览器宽度的 CSS 媒体查询：
.widget {clear:both;}
[class*=social-] {text-align:center;}
.widget(min-width:500px) {
.social-left {overflow:hidden;}
.social-right {float:right;}
}
这将带来无限的好处，并使创建在多个页面上实现的页面块变得轻而易举。既然我已经让大家了解了这个问题，那么我的问题是：
通过 iframe 实现这一点是一个可行的解决方案吗？
我所说的合理是指：
iframe 能够拥有自己的样式表，并且 css 媒体查询基于 iframe 尺寸，而不是浏览器尺寸。
我的想法
语义学
- 由于 iframe 元素存在于 HTML5 中，甚至还添加了属性，因此我认为 iframe 标签不会很快被弃用。
- 无缝标签确实有助于使其成为一个可行的解决方案，因为样式将从父文档继承。现在我们需要将这些样式重新包含（或注入）到页面中。
- iframe 也可以在不触发整个页面重新加载的情况下重新加载，这意味着如果没有 XHR，自动更新小部件将非常容易。
SEO
- 我很确定 Google 并不讨厌使用 iframe 的人，但我可能是错的。
- 由于实际的页面信息不会在 iframe 中，而只会在这些打包的块中，因此我认为它们不会对 SEO 造成损害，因为其中的内容不是实际页面内容的一部分。
- 由于侧边栏对整个页面内容没有影响，因此可以在运行时动态创建 iframe。这可能是实现它的最佳方式，但我想听听您的想法。
缺点
- 每当将新布局应用于页面时，都需要 JavaScript 来根据页面内容调整父 iframe 的大小。
在回答之前，请注意，除了某些第三方应用程序使用 iframe 的用途之外，我从未提倡将 iframe 用于任何其他用途，但现在看看这个，我看不出有什么理由不使用它们。我知道使用 css 元素媒体查询会是完美的，但我认为它不会很快实现。
我希望听到大家的更多意见，因为我绝不是 SEO 专家，也不经常（实际上，我从不）使用 iframe。
