【发布时间】：2013-02-09 10:53:13
【问题描述】：
我只是坐在那里做一些网页设计，并在想“嘿，如果我们可以将 CSS 媒体查询应用于块元素（即div、section 等）不是很好吗？”
说真的，如果我们能够拥有这个功能，我们可以制作一些非常漂亮的流畅布局。在这篇文章中，我将使用一个简单的社交插件，我可以将它实现到我的任何页面上的侧边栏，它可以根据它的父 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>
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，自动更新小部件将非常容易。
搜索引擎优化
- 我很确定 Google 并不讨厌使用 iframe 的人，但我可能错了。
- 由于实际页面信息不会在 iframe 中并且只有这些打包块，我认为它们不会对 SEO 造成损害，因为其中的内容不是实际页面内容的一部分。
- 由于侧边栏对整个页面内容没有影响，iframe 可以在运行时动态创建。这可能是实现它的最佳方式，但我想听听您的想法。
缺点
- 每当向页面应用新布局时，都需要使用 JavaScript 将父 iframe 的大小调整为页面内容。
在回答之前，请注意，除了某些 3rd 方应用程序使用 iframe 之外，我从不提倡将 iframe 用于任何用途，但现在看这个，我看不出有什么理由不使用它们.我知道使用 css 元素媒体查询将是完美的，但我认为不会很快实现。
我希望听到大家的更多消息，因为我绝不是 SEO 专家，也不经常（实际上，我从不）使用 iframe。
【问题讨论】：
标签： html css seo media-queries