html – 使用iframe将CSS媒体查询应用于块元素

概述我只是坐在一些网页设计上思考“嘿,如果我们可以将CSS媒体查询应用于块元素(即div,section等),那不是很好吗？” 说真的,如果我们能够拥有这个功能,我们可以制作一些非常令人惊叹的流畅布局.在这篇文章中,我将使用一个简单的社交插件,我可以将其实现到我的任何页面上的侧边栏中,这些页面可以基于它的父div大小而流畅.这很方便所以我可以调整我的小部件的大小,无论它是实现为500px列还是300p 我只是坐在一些网页设计上思考“嘿,如果我们可以将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 >  <div >    <div >ICON</div>    <div >like on Facebook</div>  </div>  <div >    <div >ICON</div>    <div >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

>我很确定Google并不讨厌使用iframe的人,但我可能错了.
>由于实际的页面信息不在iframe中,只有这些打包的块,我不认为它们对SEO有害,因为它们中的内容不是实际页面内容的一部分.
>由于侧边栏对整体页面内容没有影响,因此可以在运行时动态创建iframe.这可能是实现它的最佳方式,但我想听听你的想法.

缺点

>只要将新布局应用于页面,就需要JavaScript将父iframe的大小调整为页面的内容.

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

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

解决方法 谈到SEO,内容是王道.

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

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

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

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

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

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

总结

以上是内存溢出为你收集整理的html – 使用iframe将CSS媒体查询应用于块元素全部内容，希望文章能够帮你解决html – 使用iframe将CSS媒体查询应用于块元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。