1

我有这个标题由一个导航元素和一个包含内联图像和文字的标题元素组成。我选择将单词放入 span 中，以便通过媒体查询单独定位它们。这是标题的链接。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;}}
4

0 回答 0