让我的Tumblr博客响应

时间：2014-05-14 16:17:31

标签： html css tumblr

我只想让我的tumblr页面响应。我一直在网上搜索，我只是对所有事情感到困惑，而且我真的很难尝试去做。当浏览器缩小时，博客底部的链接开始相互重叠，并且图像不会流动＆＃39;无论是。此外，当您进入固定链接时，特定图像不会随浏览器一起移动（链接也存在相同问题）

继承我的博客：symbolsofwealth.tumblr.com

我真的很感激任何帮助，我试图为将来的项目学习所有这些东西，并且如果他们遇到与我相同的问题也帮助其他人！

再次感谢，Lisle 

<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>

1 个答案:

答案 0 :(得分：0)

在网站/博客中实施响应的步骤：

1） Refer Mozilla MDN site for CSS3 media query specs

2）不要使用px代替em和％代表宽度和字体

3）确定要为每种分辨率以不同方式呈现的元素

为您可以从Mozilla MDN轻松获取的每个分辨率指定@media查询并定义css 

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

4）如果是图像，请将宽度设为父级的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">
相关问题
最新问题