我只是坐在工作的一些网页设计和思考“嘿，那岂不是很好，如果我们可以应用CSS媒体查询块元素（即div ， section等）？”
说真的，如果我们能够有这个功能，我们可以做一些非常惊人的流动布局。 在这篇文章中，我将使用一个简单的社交插件，我将能够落实到侧边栏到任何我的网页，将能够根据它的父格大小为液体。 这是很方便的，所以我就能够调整我的窗口小部件无论是落实到一个500px的列或列300像素，所以我就不用为每个版面它在真实具体的实施方案的样式表。
该设计
>=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>
在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一个合理的解决方案实现这一点？
通过合理的我的意思是：
- 语义正确
- 不利于SEO
iframe是可以有它自己的样式表和CSS媒体查询是基于iframe的尺寸，而不是浏览器的尺寸。
我的想法
语义
- 由于iframe元素存在于HTML5，甚至有添加的属性，我没有看到的iframe标签变得很快过时。
- 无缝标签将真正帮助出使之成为一个可行的解决方案，因为风格会从父文件继承。 现在我们需要重新包括这些样式（或注入他们）到页面中。
- iframe的也可以不触发整个页面重新加载，这意味着自动更新的部件将没有XHR很容易重新加载。
SEO
- 我敢肯定，谷歌不使用iframe的人恨，但我可能是错了这一点。
- 由于实际的页面信息不会在一个iframe，只有这些包装块，我不认为他们是一个有损于搜索引擎优化，因为在它们的内容是不实际的页面内容的一部分。
- 由于侧边栏已没有整体上的页面内容影响时，iframe可以在运行时动态创建的。 这可能是实现它的最佳方式，但我想听听你的看法。
缺点
- 使用Javascript将需要每当一个新的布局应用到页面父IFRAME调整到页面的内容。
之前回答，请知道我从来没有使用I帧比一些第三方应用程序将其用于其他用途的任何东西，但现在看这个的倡导者，我看不出有任何的理由不使用它们。 我知道使用CSS元素媒体查询的将是完美的，但我没有看到正在尽快实施的任何时间。
我希望听到你们更多，因为我绝不是在搜索引擎优化方面的专家，不经常（其实，我从来没有）使用iframe的。
