이 로고, 슬로건 및 비디오를 어떻게 반응시킬 수 있습니까?

여기에 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>

는 내가 달성하고자하는 것은 상단에 로고가 화면의 중앙에 바로 아래에 수직 로고 및 비디오 인라인 표시는 슬로건과 간단한 웹 사이트입니다. 또한 이러한 모든 응답을 어떻게 할 수 있습니까 ?? 글꼴이 제대로 작동하는지 테스트 할 수 없습니다. localhost에서 작업 중입니다. 오류를 발견했거나 다른 것을 보여줄 수있는 가장 좋은 방법을 제시 할 수 있다면 제발 도와주세요.

출처

2013-12-13 Ekin

무엇을 시도 했습니까? 외모로 보면 반응 형 웹 디자인에 익숙하지 않은 것입니다. 반응 형 웹 자습서를 살펴보고 사이트 설정에 대한 기본 사항을 알아야합니다. –

그래서 나는 이것을 배우려고 노력하고 있습니다. – 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

# 비디오 에서 여백을 제거하고 iframe에서 너비/높이 특성을 제거합니다. width = "840"height = "480"다음과 같이 바꾸십시오.

style = "표시 : 인라인 블록, 너비 : 100 %, 최소 높이 : 250px;" 당신이 글꼴을 다운로드하는 경우

글꼴과 관련

, 당신이 볼 htaccess로에서 일부 설정을 사용하려면이 게시물 더 쉬운 옵션은 다음 https://www.google.com/fonts 당신이 돈에 글꼴을 사용하는 것입니다 SVG gradient backgrounds doesn't work

이 필요합니다 스스로를 호스팅 서버 관련 사항에 대해 걱정할 필요가 없습니다.

출처

2013-12-13 20:48:52 ak85

도움 주셔서 감사합니다! 나는 그것을 여기에서했다 : http://jsfiddle.net/xibalbian/tqVLX/ 그러나 지금 그것은 모든 길이 넓고 높이는 항상 250px이다. 아직 내가 성취하고자하는 것이 아닙니다. 폭이 넓어지기를 원하지는 않습니다. 세로로 가운데와 700-750 픽셀을 정렬하고 싶습니다. – Ekin

이 로고, 슬로건 및 비디오를 어떻게 반응시킬 수 있습니까?

답변

관련 문제