0

ブラウザのサイズに応じて正しくスケーリングされるように、このヘッダーを作成しようとしています。ヘッダーのスケーリングを取得しました。現在は、css プロパティ (ホバー背景色など) を維持しながら、それに応じて UL (ナビゲーションバー) をスケーリングするだけです。

ここに私のHTMLがあります:

<body>
<div id = "container">
    <div id = "header">
        <img id = "logo" src="SLS LOGO.png" />
            <div id = "navbar">
                <ul id = "tabs">
                    <li><a href = "#"> Home </a></li>
                    <li><a href = "#"> Gallery </a></li>
                    <li><a href = "#"> Calender </a></li>
                    <li><a href = "#"> About</a></li>
                    <li><a href = "#"> Members</a></li> 
                </ul>
            </div>
     </div>
</div>

そしてCSS：

#container  {
width: 70%;
height: auto;
margin: auto;
}

                /* Start Header */
#header {
width: 100%;
height: auto;
margin: auto;
margin-top: 2%; 
background: white;
height: 201px;

}

#logo   {
float: left;
width: 40%;;
margin-top: 2%; 
height: 80%;
}

#navbar {
float: right;
width: 60%;
height: 100%;
}

#tabs   {
margin: 0; 
padding: 0;
list-style: none;
text-align: center;
height: 100%;
}

#tabs li    {
display: inline;    
}

#tabs li a  {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
padding: 5%;
width: 10%;
float: left;
color: #999;
font-weight: 400;
line-height: 141px;
height: 141px;

}

#tabs li a:hover    {
color: #333;
background: #F0F0F0;
border-bottom: thin blue solid;
}

            /* End Header */
4

1 に答える 1

1

メディア クエリを使用して、要素をターゲット デバイスに合わせて適切に配置する必要があります (この質問の目標だと思います)。たとえば、これをコードの最後に配置し、ブラウザのサイズを変更して小さいビューに変更することができます。結果を見る:

@media screen and (min-width: 0) and (max-width: 480px){                                              

     #logo, #navbar, #tabs, .tabs li a {                                         

         float:none;                                                                                  
         width:100%;                                                                                  

     }                                                                                                
     #tabs li{                                                                   
         display:block;                                                            

     }                                                                           
     #tabs li a{                                                                 
         width:100%;                                                             
         height:100%;                                                            
         display:block;                                                            

     }                                                                             

 }

基本的に、幅が 0px から 480px のビューにサイズ変更されたときに、ターゲット要素のプロパティ値を変更するようにブラウザに指示しているところです。必要と思われる数のメディア クエリを使用し、必要に応じて値を変更できます。

于 2013-07-04T02:53:34.667 に答える