Google Swiffy，响应式设计，高度

Posted 2023-02-18

【中文标题】Google Swiffy，响应式设计，高度

【英文标题】：Google Swiffy, and responsive design, height

【发布时间】：2013-12-29 18:48:48

【问题描述】：

我正在测试 Swiffy，并将其插入 Zurb 的 Foundation 响应式框架。这一切都很好。我还更新了 #swiffycontainer 容器的 CSS，使其宽度为 width: 100%;。

内容非常适合网格，但我唯一的问题是，如果没有明确设置大小，那么在较小的屏幕上，我会遇到高度比内容大得多的问题，即使高度设置为500px。这也会导致 Swiffy 容器在 stage 的 outside 中显示内容。

关于为什么的任何想法？会是从 Swiffy 生成的 SVG 吗？谢谢！

更新：这似乎与 AS 2/3 在舞台上的 stageScale 属性有关。有人会碰巧知道“showAll/SHOW_ALL”和“noBorder/NO_BORDER”之间的快乐媒介吗？舞台仍在调整大小但周围没有显示边框？

【参考方案1】：

我最终用一点 CSS 解决了这个问题，确保 height 与 width 成比例缩放（由于响应式网格，它可能是什么宽度）。这可以防止 flash/Swiffy 容器创建信箱栏。

在 SWF 中：保持默认（AS2）：

Stage.scaleMode = "noScale";

在 CSS 中，在 Swiffy 容器上创建了一个包装器：

.swiffy-wrap  
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  float: left;
  height: 0;

在 Swiffy 容器上

#swiffycontainer 
  width : 100% !important;
  height: 100% !important;
  position: absolute;
  left: 0;

【讨论】：

Stage.scaleMode 的 as3 怎么样

【参考方案2】：

只要输入swiffy转换的html结果宽度100%注意只有宽度不是高度，高度，像这样

div id="swiffycontainer" style="width: 100%; height: 500px"

为我工作