我該如何使這個標誌，標語和視頻響應？

這裏是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>

我想實現的是一個簡單的網站，在頂部的標誌和屏幕中間帶有徽標和視頻內嵌顯示下方垂直的口號。另外，我怎樣才能使這些都響應？我無法測試字體是否正常工作，我在本地主機上工作。如果您發現任何錯誤，或者如果您可以向我展示另一種錯誤以及這樣做的最佳方式，請幫我修復它們。

來源

2013-12-13 Ekin

你有什麼嘗試？從外觀上看，您對響應式網頁設計並不熟悉。您應該查看響應式Web教程，以便了解設置網站的基本知識。 –

這就是爲什麼我試圖做到這一點，學習。 – Ekin

我明白，但這不是stackoverflow的要點。這是問題而不是教程的最後手段資源。我包括一些鏈接來幫助。 http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design//http://www.adobe.com/inspire/2013/02/responsive-web-design.html關於標誌，使用'svg'圖片類型，它將100％響應，看看這個小提琴http://jsfiddle.net/Josh_JM/fwrzB/2/。這是一張圖片，您可以看到文字，所有內容都可以突出顯示和編輯。將鼠標懸停在圖片上即可查看。 –

例子：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; 
    } 
}

來源

2013-12-13 21:10:37 Raul

感謝您的幫助！我讓它http://jsfiddle.net/xibalbian/tqVLX/#base – Ekin

我會擺脫#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那麼你不不需要擔心任何服務器的東西。

來源

2013-12-13 20:48:52 ak85

感謝您的幫助！我做到了，在這裏：http://jsfiddle.net/xibalbian/tqVLX/但現在它一路寬，高度始終爲250px。仍然不是我想要實現的。我不希望它變寬，我只想將它垂直居中，700-750px寬。 – Ekin

我該如何使這個標誌，標語和視頻響應？

回答

相關問題