我怎样才能使这个标志、口号和视频响应？答案

【问题标题】：How can I make this logo,slogan and video responsive?我怎样才能使这个标志、口号和视频响应？
【发布时间】：2013-12-13 20:35:29
【问题描述】：

这里是 jsfiddle：http://jsfiddle.net/xibalbian/L4znJ/

我正在尝试嵌入一个随机视频并希望使其具有响应性。

<div id="full-video">
<div class="fullvid">
<div class="video" style="margin-left:16.25em;">
    <iframe width="840" height="480" src="//www.youtube.com/embed/WeYsTmIzjkw?rel=0" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe></div>
</div>
</div>

我想要实现的是一个简单的网站，顶部有一个标志，标语与标志内联显示，屏幕中间垂直下方有一个视频。另外，我怎样才能让这些都响应？我无法测试字体是否正常工作，我正在本地主机上工作。如果您发现任何错误，或者您可以向我展示其他错误以及最好的解决方法，请帮助我修复它们。

【问题讨论】：

你试过什么？从外观上看，您并不熟悉响应式网页设计。您应该查看响应式网络教程，以便了解设置网站的基础知识。
这就是为什么我要尝试这样做，学习。
我明白，但这不是 stackoverflow 的重点。它是解决问题而不是教程的最后手段。我包括一些帮助链接。 coding.smashingmagazine.com/2011/01/12/… / adobe.com/inspire/2013/02/responsive-web-design.html 与徽标有关，使用 svg 图像类型，它将 100% 响应，看看这个小提琴 jsfiddle.net/Josh_JM/fwrzB/2。那是一张图片，您可以看到文字，所有内容都可以突出显示和编辑。将鼠标悬停在图片上即可查看。

标签： html css

【解决方案1】：

示例： http://jsfiddle.net/LFpU5/

自定义编辑 HTML：

<div class="video" style="margin-left:16.25em;">

为：

<div class="video margin">

CSS 响应式：

.margin {margin-left:16.25em;}

@media only screen and (max-width: 480px) {
    .margin {margin-left:0;}
    .logo {
        float: none;
        width: auto;
    }
    .banner {
        width: auto;
    }
    .video iframe,
    .video object,
    .video embed {
        width: 100%;
        height: auto;
        display:block;
    }
}

【讨论】：

【解决方案2】：

我会去掉 #video 中的边距并从 iframe 中删除宽度/高度属性。 width="840" height="480" 并用类似下面的内容替换它应该是响应式的

style="display:inline-block; width:100%; min-height: 250px;"

关于字体，如果您要下载字体并自己托管，则需要在 htaccess 中启用一些设置，请参阅此帖子SVG gradient backgrounds doesn't work

更简单的选择是在https://www.google.com/fonts 上使用字体，这样您就不必担心任何服务器问题。

【讨论】：

感谢您的帮助！我做到了，在这里：jsfiddle.net/xibalbian/tqVLX 但现在它一直很宽，高度总是 250px。仍然不是我想要达到的目标。我不希望它太宽，我只想将它垂直居中对齐，宽度为 700-750px。