I was just sitting working on some web design and thinking "Hey, wouldn't it be nice if we could apply CSS media queries to block elements (ie. div, section, etc.)?"

我只是坐在一些网页设计上思考“嘿，如果我们可以将CSS媒体查询应用于块元素（即div，section等），那会不会很好？”

Seriously, we could make some pretty stunning fluid layouts if we were able to have this functionality. In this post I'll use a simple social plugin that I would be able to implement into a sidebar onto any of my pages that would be able to be fluid based on it's parent div size. This is handy so I would be able to resize my widget whether it is implemented into a 500px column or a 300px column so I wouldn't have to program specific stylesheets per layout it's implemented in.

说真的，如果我们能够拥有这个功能，我们可以制作一些非常令人惊叹的流畅布局。在这篇文章中，我将使用一个简单的社交插件，我可以将其实现到我的任何页面上的侧边栏中，这些页面可以基于它的父div大小而流畅。这很方便所以我可以调整我的小部件的大小，无论它是实现为500px列还是300px列，因此我不必为每个布局实现特定的样式表。

The Design

            >=500px                          <500px
 _______________________________       ____________________
|                               |     |                    |
 ____________________    ______               ______
|                    |  |      |             |      |
|  LIKE ON FACEBOOK  |  | ICON |             | ICON |
|____________________|  |______|             |______|
 ____________________    ______        ____________________  
|                    |  |      |      |                    |
|  FOLLOW ON TWITTER |  | ICON |      |  LIKE ON FACEBOOK  |
|____________________|  |______|      |____________________|

                                              ______
                                             |      |
                                             | ICON |
                                             |______|
                                       ____________________  
                                      |                    |
                                      |  FOLLOW ON TWITTER |
                                      |____________________|

The HTML Markup

<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

Now for the css element media query part. This is NOT valid css, but is what I am wanting to achieve. Essentially just a css media query based on a parent element instead of the entire browser width:

现在为css元素媒体查询部分。这不是有效的CSS，但是我想要实现的。基本上只是一个基于父元素而不是整个浏览器宽度的css媒体查询：

.widget {clear:both;}
[class*=social-] {text-align:center;}
.widget(min-width:500px) {
  .social-left {overflow:hidden;}
  .social-right {float:right;}
}

This would have infinite benefits and would make creating page blocks to be implemented on multiple pages a breeze. Now that I've got you all up to speed on the problem, here comes my question:

这将带来无限的好处，并且可以轻松创建在多个页面上实现的页面块。现在我已经让你们快速解决问题，我的问题就出现了：

Is implementing this through an iframe a plausible solution?

By plausible I mean:

合理的我的意思是：

semantically correct
语义正确
not detrimental to SEO
对SEO没有害处

An iframe is able to have it's own stylesheet and css media queries are based on the iframe dimensions, not the browser dimensions.

iframe可以拥有自己的样式表，而css媒体查询则基于iframe维度，而不是浏览器维度。

My Thoughts

Semantics

Since the iframe element is present in HTML5 and even has added attributes, I don't see the iframe tag becoming deprecated anytime soon.
由于iframe元素存在于HTML5中，甚至添加了属性，因此我很快就看不到iframe标记已被弃用。
The seamless tag would really help out in making this a viable solution since styles would be inherited from the parent document. For now we would need to re-include these styles (or inject them) into the page.
无缝标签真的有助于使其成为可行的解决方案，因为样式将从父文档继承。现在我们需要将这些样式重新包含（或注入它们）到页面中。
The iframe could also be reloaded without triggering a whole page reload which means auto-updating widgets would be quite easy without XHR.
iframe也可以重新加载而不会触发整个页面重新加载，这意味着没有XHR，自动更新小部件将非常容易。

SEO

I'm pretty sure that Google doesn't hate on people using iframes, but I could be wrong on that.
我很确定谷歌不会讨厌使用iframe的人，但我可能错了。
Since the actual page info would not be in an iframe and only these packaged blocks, I don't see them being a detriment to SEO since the content within them is not part of the actual page content.
由于实际的页面信息不在iframe中，只有这些打包的块，我不认为它们对SEO有害，因为它们内的内容不是实际页面内容的一部分。
Since the sidebar has no affect on overall page content, the iframe could be dynamically created at runtime. This may be the best way of implementing it, but I'd like to hear your thoughts.
由于侧边栏对整体页面内容没有影响，因此可以在运行时动态创建iframe。这可能是实现它的最佳方式，但我想听听你的想法。

Drawbacks

Javascript would be needed to resize the parent iframe to the page's content whenever a new layout is applied to the page.
在将新布局应用于页面时，需要使用Javascript将父iframe的大小调整为页面的内容。

Before answering, please know I have never been an advocate of using iframes for ANYTHING other than the uses some 3rd party apps use it for, but now looking at this, I don't see much of a reason not to use them. I know the use of css element media queries would be PERFECT, but I don't see that being implemented any time soon.

在回答之前，请知道除了使用一些第三方应用程序使用iframe之外，我从来没有一直倡导使用iframe，但现在看看这个，我没有看到很多理由不使用它们。我知道使用css元素媒体查询是完美的，但我不认为它会很快实现。

I hope to hear more from all of you since I am by no means an expert on SEO and do not often (actually, I never) use iframes.

我希望能听到你们所有人的更多信息，因为我不是SEO的专家，而且经常（实际上，我从来没有）使用过iframe。

2 个解决方案

#1

When it comes to SEO, content is king.

谈到SEO，内容是王道。

When search engines crawl your site, iFrame's (and their source) are noted, but it is likely they will not be crawled with the page. If you have content that is absolutely vital it be attributed to that specific page, keep it out of an iFrame.

当搜索引擎抓取您的网站时，会记录iFrame（及其来源），但很可能它们不会被抓取。如果您的内容非常重要，则会将其归因于该特定页面，请将其保留在iFrame之外。

An iFrame's content will still be crawled, but it's content won't be lumped in with the information the crawler finds on the page; It'll be it's own entity. It will also attribute that content to the site or page the content is being served from.

iFrame的内容仍会被抓取，但内容不会与抓取工具在网页上找到的信息混在一起;这将是它自己的实体。它还会将该内容归因于正在提供内容的网站或网页。

Also, don't let the seamless attribute introduced in HTML5 fool you. It doesn't change how an iFrame works, it just changes it's presentation.

另外，不要让HTML5中引入的无缝属性欺骗你。它不会改变iFrame的工作方式，只会改变它的演示。

What it boils down to is how important is the data? If you are simply wanting to use an iFrame for stylistic purposes to present links to social media, as you have outlined in your example, you should be able to get away with using an iFrame without a negative affect.

它归结为数据有多重要？如果您只是想将iFrame用于风格目的来呈现社交媒体的链接，正如您在示例中所概述的那样，您应该能够使用iFrame而不会产生负面影响。

However, if you're using an iFrame for stylistic purposes and have important content that needs to be attributed to the page you're on, I would find another way to present the content.

但是，如果您将iFrame用于风格目的并且具有需要归因于您所在页面的重要内容，我会找到另一种呈现内容的方式。

Therefore, in your example, of using an iFrame specifically for social media links, I would say the usage of an iFrame to get the benefit of media queries would be acceptable.

因此，在您的示例中，使用专门用于社交媒体链接的iFrame，我会说使用iFrame来获取媒体查询的好处是可以接受的。

#2

A much better solution that is unfortunately not yet validated would be to use media queries with scoped styles. Source: http://davidwalsh.name/scoped-css

遗憾的是，尚未验证的更好的解决方案是使用带有范围样式的媒体查询。资料来源：http：//davidwalsh.name/scoped-css

#1