내 Tumblr 블로그 반응적임

나는 tumblr 페이지를 반응 적으로보기를 원합니다. 나는 그물을 통해 수색을 해왔고 모든 것을 혼란스러워하고 있습니다. 나는 그것을 시도하고 수행하기 위해 정말로 고심하고 있습니다. 브라우저가 축소되면 블로그 하단의 링크가 서로 겹쳐지기 시작하고 이미지도 '흐르지 않습니다'. 당신은 영구 링크에 갈 때 또한, 특정 이미지가내 Tumblr 블로그 반응적임

가 Heres는 내 블로그 (너무 링크와 같은 문제) 브라우저로 이동하지 않습니다 symbolsofwealth.tumblr.com이

어떤 도움이 정말 감사하겠습니다, I 미래 프로젝트를 위해이 모든 것들을 배우려고 노력하고, 나와 같은 문제를 겪는다면 다른 사람들을 도울 수 있습니다!

다시 한 번 감사드립니다, 라일

<html> 
<head> 
    <title>{Title}</title> 
    <link rel="shortcut icon" href="{Favicon}"> 
    <link rel="alternate" type="application/rss+xml" href="{RSS}"> 
    {block:Description} 
     <meta name="description" content="{MetaDescription}" /> 
    {/block:Description} 
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'> 



     <meta name="color:Background" content="#ffffff"/> 
     <meta name="color:Text" content="#000000"/> 
     <meta name="color:Video Corner Fold" content="red"> 
     <meta name="font:Font" content="'BrownBold'"> 
     <meta name="if:Show Captions" content="0"/> 
     <meta name="if:Uppercase Links" content="0"> 
     <meta name="if:Fade On Hover" content="0"> 
     <meta name="if:Show Tags on Index Page" content="0"> 
     <meta name="image:header" content="0"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 




<script language=”javascript” type=”text/javascript”> 

<!-- 
SYMBOLS OF WEALTH © Tumblr Theme 
This theme was created by Lisle Abrahams for SYMBOLS OF WEALTH © 
--> 

function clickIE() 
{if (document.all) 
{(message);return false;}} 

function clickNS(e) { 
if 
(document.layers||(document.getElementById&&!document.all)) 
{ 
if (e.which==2||e.which==3) {(message);return false;}}} 

if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document. onmousedown=clickNS;} 
else 
{document.onmouseup=clickNS;document.oncontextmenu =clickIE;} 

document.oncontextmenu=new Function(“return false”) 
–> 
</script> 




<style type="text/css"> 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 




} 



#header { 
    height: 40%; 
    background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat; 
    position: fixed; 
    margin: 15px 50% 0 50%; 
    top: 0px; 
    left: -300px; 
    right: -300px; 
    z-index: 1; 


} 

body { 
background-color:{color:Background}; 
font-family:{font:Font}; 
color:{color:Text}; 
font-size:17px; 
line-height:25px; 
{block:PermalinkPage} 

{block:PermalinkPage} 
} 



a { 
padding-bottom:2px; 
color:{color:Text}; 
text-decoration:none; 
border-bottom:2px solid; 
} 

iframe#tumblr_controls { 
display:none; 
} 
#wrapper { 
{block:PermalinkPage} 
width:580px; 
float:left; 
{/block:PermalinkPage} 
position:relative; 
margin: 160px auto; 
} 


#post { 
padding:40px; 
{block:PermalinkPage} 
margin: 15px 50% 0 50%; 
    top: 0px; 
    left: -300px; 
    right: -300px; 
{/block:PermalinkPage} 

} 

#captions { 
    {block:PermalinkPage} 
    position:absolute; 
    left:600px; 
    top:40px; 
    display:block; 
    border-top:1px; 
    {/block:PermalinkPage} 
} 



#post img { 
width:100%; 
} 
#post img:hover { 
{block:IndexPage} 
{block:IfFadeOnHover} 
opacity:0.5; 
{/block:IfFadeOnHover} 
{/block:IndexPage} 
} 
#post embed, #post iframe { 
width:100% !important; 
} 
#post .photoset a:first-child { 
display:block !important; 
border:0 !important; 
padding:0 !important; 
} 
#post .photoset a { 
display:none; 
} 
.title { 
width:100%; 
text-align:center; 
margin:auto; 
position:fixed; 
top:20px; 
z-index:5000; 
} 
.follow { 
position:fixed; 
margin: 0px 30% 0 16.3%; 
bottom:20px; 
z-index:5000; 
} 
.archive { 
position:fixed; 
margin: 0px 20px 0 30%; 
bottom:20px; 
z-index:5000; 
} 
.message { 
position:fixed; 
bottom:20px; 
left:20px; 
z-index:5000; 
} 
.random { 
position:fixed; 
margin: 0px 0px 0 60%; 
bottom:20px; 
z-index:5000; 
} 
#toTop { 
width:100%; 
margin: 0px 0px 0 43%; 
z-index:5000; 
position:fixed; 
display:none; 
bottom:20px; 
cursor:pointer; 

} 
.player { 
background:#000; 
} 
ul.chat { 
list-style-type:none; 
padding:0; 
margin:0; 
} 
#infscr-loading { 
display:none !important; 
} 

.corner { 
top:6px; 
right:40px; 
position:absolute; 
padding:1em 1.5em; 
margin:2em auto; 
color:#fff; 
overflow:hidden; 
z-index:4000; 
} 


.corner:before { 
content:""; 
position:absolute; 
top:0px; 
right:0px; 
border-width:0 25px 25px 0; 
border-style:solid; 
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold}; 
background:#fff; 
display:block; width:0; /* Firefox 3.0 damage limitation */ 
} 

img { 
    {block:IndexPage} 

     opacity: 1.0; 
     -webkit-transition: all 0.3s linear 0s; 
     -moz-transition: all 0.3s linear 0s; 
      -o-transition: all 0.3s linear 0s; 
       transition: all 0.3s linear 0s; 
       {/block:IndexPage} 


} 

img:hover { 
    {block:IndexPage} 

    opacity: 0.6; 
     -webkit-transition: all 0.3s linear 0s; 
     -moz-transition: all 0.3s linear 0s; 
      -o-transition: all 0.3s linear 0s; 
       transition: all 0.3s linear 0s; 
       {/block:IndexPage} 


} 


{CustomCSS} 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('#toTop').fadeIn(); 
     } else { 
      $('#toTop').fadeOut(); 
     } 
    }); 

    $('#toTop').click(function() { 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 600); 
     return false; 
    }); 

}); 
</script> 
</head> 

<body> 

<div id="header"></div> 

{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks} 
<div class="title"><a href="/">{Title}</a></div> 
<div class="archive"><a href="archive">Archive</a></div> 
<div class="message"><a href="/ask">Message</a></div> 
<div class="follow">{block:PermalinkPage}{block:Posts}<a href="{ReblogURL}" target="_blank">Reblog</a>/{/block:Posts}{/block:PermalinkPage}<a href="http://www.tumblr.com/follow/{Name}">Follow</a></div> 
<div class="random"><a href="/random">Random</a></div> 
<div id="toTop">Back to top</div> 
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks} 




<div id="wrapper"> 

{block:Posts} 
<div id="post" 
{block:IndexPage} 
{block:Post1}style="width:380px"{/block:Post1} 
{block:Post2}style="width:410px"{/block:Post2} 
{block:Post3}style="width:500px"{/block:Post3} 
{block:Post4}style="width:290px"{/block:Post4} 
{block:Post5}style="width:320px"{/block:Post5} 
{block:Post6}style="width:460px"{/block:Post6} 
{block:Post7}style="width:530px"{/block:Post7} 
{block:Post8}style="width:280px"{/block:Post8} 
{block:Post9}style="width:340px"{/block:Post9} 
{block:Post10}style="width:400px"{/block:Post10} 
{block:Post11}style="width:260px"{/block:Post11} 
{block:Post12}style="width:370px"{/block:Post12} 
{block:Post13}style="width:520px"{/block:Post13} 
{block:Post14}style="width:310px"{/block:Post14} 
{block:Post15}style="width:250px"{/block:Post15} 
{/block:IndexPage} 
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage} 
> 

{block:Text} 
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title} 
{Body} 
{/block:Text} 

{block:Link} 
<a href="{URL}" class="link" {Target}>{Name}</a> 
{block:Description}<div class="description">{Description}</div>{/block:Description} 
{/block:Link} 

{block:Quote} 
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a> 
{block:Source} 
<p>&mdash; {Source}</p> 
{/block:Source} 
{/block:Quote} 





{block:Photo} 
{block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"></div></a>{/block:IndexPage} 


{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage} 

{block:PermalinkPage}{block:Caption}<div id="captions">{Caption}</div>{/block:Caption}{/block:PermalinkPage} 
{/block:Photo} 




{block:Chat} 
{block:Title}<h2>{Title}</h2>{/block:Title} 
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul> 
{/block:Chat} 

{block:Video} 
{block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage} 
<div id="video"> 
{Video-500} 
</div> 
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage} 
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage} 
{/block:Video} 

{block:Photoset} 
{block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}"></a>{/block:Photos}</div>{/block:IndexPage} 
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} 
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage} 
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage} 
{/block:Photoset} 

{block:Audio} 
{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt} 
<div class="player">{AudioPlayerBlack}</div> 
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage} 
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage} 
{/block:Audio} 

{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage} 

</div> 
{/block:Posts} 

{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a>{/block:NextPage} 

</div> 

</body> 
</html>

출처

2014-05-14 Lisle

단계 웹 사이트/블로그에 응답 구현하려면 :

1) Refer Mozilla MDN site for CSS3 media query specs

2) EM을 사용하는 대신 픽셀을 사용하지 마십시오과 너비 및 글꼴의 경우 %

3) 각 해상도

다르게 렌더링 할 ments가 쉽게 이미지의 경우에는 CSS

@media (max-width: 480px) { 
    .element_selector { 
     width: 90%; // properties you want to change } 
}

4) 모질라 MDN에서 얻을 정의 할 수 있습니다 각 해상도에 대한 @media 쿼리를 지정합니다 너비가 컨테이너의 크기에 맞게 부모의 100 %가되도록하십시오.

@media (max-width: 480px) { 
     img { 
     max-width: 100%; 
     // properties you want to change 
     } 
    }

집중하려는 모든 화면 해상도에 대해 그렇게하십시오. 마침내

5) 헤더에 그 사람에 대한 너무 많은

<meta name="viewport" content="width=device-width, initial-scale=1">

출처

2014-05-14 16:25:21 mohamedrias

감사를이 메타를 추가합니다. 그게 정확히 내가 뭘 찾고 있었는지, 간단하고 이해하기 쉬운 고장. 나는 이것을 바로 구현할 것이며 그것이 어떻게 진행되는지 알려줄 것입니다! – Lisle

그레이트 .. 귀하의 응답을 기다리고있을 것입니다 :) – mohamedrias

내 Tumblr 블로그 반응적임

답변

관련 문제