8

我只是坐在那里做一些网页设计，并在想“嘿，如果我们可以将 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，自动更新小部件将非常容易。

搜索引擎优化

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

缺点

  • 每当向页面应用新布局时，都需要 Javascript 将父 iframe 的大小调整为页面内容。

在回答之前，请知道除了某些 3rd 方应用程序使用 iframe 之外，我从未提倡将 iframe 用于任何其他用途，但现在看这个，我看不出有什么理由不使用它们。我知道使用 css 元素媒体查询将是完美的，但我认为不会很快实现。

我希望听到你们所有人的更多消息，因为我绝不是 SEO 专家，也不经常（实际上，我从不）使用 iframe。

4

3 回答 3

3

说到SEO，内容为王。

当搜索引擎抓取您的网站时，会记录 iFrame（及其来源），但它们很可能不会与页面一起被抓取。如果您拥有绝对重要的内容，则将其归因于该特定页面，请将其置于 iFrame 之外。

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

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

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

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

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

于 2013-02-26T05:10:52.413 回答
1

CSS 容器查询 (caniuse.com)

将样式应用于指定容器元素而不是整个页面的实验性媒体查询。当前使用包含属性和@container at-rule 实现。

目前只能通过chrome:flagsCanary 获得。

容器查询使我们不再只考虑视口，而是允许任何组件或元素响应定义的容器宽度。因此，尽管您仍然可以将响应式网格用于整体页面布局，但该网格中的组件可以通过查询其容器来定义自己的行为变化。然后，它可以根据它是显示在窄容器还是宽容器中来调整其样式。

于 2021-08-02T09:27:16.403 回答
0

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

于 2013-02-28T22:16:25.400 回答