Question

我的这个标题由一个nav元素和一个包含内嵌图像和单词的标题元素组成。我选择将单词放入跨度中，以便通过媒体查询单独定位它们。这是标题的链接。 http://noahenart.com/header/

尝试调整浏览器的大小，一切都按照计划进行，但重新调整大小并且不会恢复到以前的状态（除非您刷新页面）。当使用移动设备和改变方向时，这成为一个问题。

我尝试过不同的方法，包括将图像放在一个单独的标题上，这个标题包含在一个hgroup中但是也没有用。我有什么想法可以解决这个问题吗？

<header class="top">
<div class="mast">  

    <h1 title="Hawaii Media Grant">
        <a href="#">
            <img id="logoi" src="img/logo_h.png" alt="Hawaii Media Grant logo">
            <span id="logos">HAWAII</span>
            <span id="logob">MEDIA</span>
            <span id="logom">GRANT</span>
        </a>
    </h1>

    <nav>
        <ul>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Work">Work</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
    </nav>

</div>
</header>

header h1 { 
font-size: 1em; 
text-transform: uppercase; 
line-height: 1.1875em; 
font-weight: normal; 
font-style: normal;
float: left; 
margin: 0 0 0 1%; 
position: relative;}

header h1 img { 
float: left; 
position: relative; 
bottom:30px; right: 10px;} 

header h1 a { 
color: #000; 
font-family: "nevisBold","nevis", "Helvetica neue", Arial,sans-serif; 
font-size: 2.2em; 
padding: 0;}

header h1 a span#logos,
header h1 a span#logob,
header h1 a span#logom { 
display: inline;}

a {
background: transparent; 
color: #bababa;
font-size: 100%; 
margin: 0; padding: 0;
text-decoration: none;
vertical-align: baseline; 
-moz-outline: none;}

a:focus, 
a:hover, 
a:active {
outline: 0;}

ul, ol { 
margin-left: 0; 
padding: 0;  
list-style: none;}

header ul {
float: right;
margin: 0;
clear: none;}

header li {
display: inline;
margin: 0 0 0 1.5em;}

header a {
color: #333;
padding: 0 0 5px 0;}

header a:hover {
border-bottom: 6px solid #bababa;
color: #8cc4f5;}

header.top {
background: #fff; 
width: 100%;}

.mast {
margin: 0 auto;   
overflow: auto;
padding: 5em 0 1.25em 0;
width: 71.830985915492958%; max-width: 1020px;} 

@media screen and (max-width: 1195px){
.mast { padding:52px 0 20px 0;}
header h1 { float:none; text-align:center; margin-top:-30px; margin-bottom:; padding-top:; padding-bottom:;}
header h1 img { float:none; bottom:-30px; right: 10px}
header ul { float:none; margin:0.7em auto 1.15em; text-align:center;}}

@media screen and (max-width: 769px) {
header h1 { font-size: 0.8em;}
header h1 a img#logoi { bottom: 0; right: 0; margin: 0 0 0.5em 0; width: 8%;}
header h1 a span#logos { display: block !important; margin: 0 0 0.5em 0;}
header ul { margin: 0.7em auto 0;}
header li { margin: 0 0 0 .5em;}}

@media screen and (max-width: 480px){
header h1 a { padding-bottom: 0; font-size: 2em;}
header h1 a img#logoi {width: 15%;}
header li { margin: 0 0 0 .4em;}}

调整页面大小时页眉元素未重置（在Safari中）

0 个答案: