画面の解像度に応じてdivを作成する方法は？

Question

画面のサイズがデフォルトの画面解像度に等しい場合に限り、divがうまく機能します（すべての領域を占有します）。そうでなければ私はこれを得る

画面のサイズ変更に反応する方法は？

ul{ 
 
\t \t list-style: none; \t \t 
 
} 
 

 
header{ 
 
\t width: auto; 
 
\t background: url(pictures/heading-zebras-2.png) no-repeat 50% 0; 
 
\t -webkit-background-size: cover; 
 
\t background-size: cover; 
 
\t height: 450px; 
 
} 
 

 
header h1{ 
 
\t float: left; 
 
\t background-color:rgba(0,0,0,0.5); 
 
\t padding: 40px 0 34px 43px; 
 
\t width: 437px; 
 
} 
 

 
.tel { 
 
\t display: inline-block; 
 
\t background-color:rgba(0,0,0,0.5); 
 
\t height: 60px; 
 
\t padding: 30px 87px 0 0; 
 
\t width: cover; 
 
} 
 

 
.tel li { 
 
\t list-style-type: none; 
 
\t display: inline; 
 
} 
 

 
.tel a{ 
 
\t font: 28pt/0.64 "Consolas", Arial, Helvetica, sans-serif; 
 
\t color: white; 
 
\t padding: 0 0 0 50px; 
 
\t font-size: 87.5%; 
 
}

<header> 
 
<div><h1><a href="homepage.html"><img src="pictures/header-banner-text.png" alt="banner"></a></h1></div> 
 
    <div class="tel"> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t  <li><a href=".html" title="">AMERICAS</a></li> 
 
\t \t \t \t <li><a href=".html" title="">AFRICA</a></li> 
 
\t \t \t \t <li><a href=".html" title="">EUROPE</a></li> 
 
\t \t \t \t <li><a href=".html" title="">AUSTRALIA</a></li> 
 
\t \t \t \t <li><a href=".html" title="">ASIA</a></li> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </div> 
 
</header>

Answer 1

は、この問題を作成して、あなたの固定h1幅です。レスポンシブデザインの場合は、できるだけ固定値を使用しないでください。

html, 
 
body { 
 
    min-height: 100%; 
 
    height: 100%; 
 
    width: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
header { 
 
\t width: 100%; 
 
\t background: url(pictures/heading-zebras-2.png) no-repeat 50% 0; 
 
\t -webkit-background-size: cover; 
 
\t background-size: cover; 
 
\t height: 450px; 
 
\t display: flex; 
 
} 
 

 
#banner-div { 
 
\t flex: 1; 
 
\t display: inline-block; 
 
\t background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
header h1 { 
 
\t width: 100%; 
 
\t padding: 40px 0 34px 43px; 
 
\t float: left; 
 
} 
 

 
.tel { 
 
\t flex: 4; 
 
\t height: 60px; 
 
\t width: 100%; 
 
\t display: inline-block; 
 
\t padding: 30px 87px 0 0; 
 
\t background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.tel li { 
 
\t list-style-type: none; 
 
\t display: inline; 
 
} 
 

 
.tel a { 
 
\t font: 28pt/0.64 "Consolas", Arial, Helvetica, sans-serif; 
 
\t color: white; 
 
\t padding: 0 0 0 50px; 
 
\t font-size: 87.5%; 
 
}

<header> 
 
\t <div id="banner-div"> 
 
    \t <h1> 
 
\t \t \t <a href="homepage.html"> 
 
\t \t \t \t <img src="pictures/header-banner-text.png" alt="banner"> 
 
\t \t \t </a> 
 
\t \t </h1> 
 
\t </div> 
 
\t <div class="tel"> 
 
    \t <nav> 
 
     \t <ul> 
 
      \t <li><a href=".html" title="">AMERICAS</a></li> 
 
      \t <li><a href=".html" title="">AFRICA</a></li> 
 
      \t <li><a href=".html" title="">EUROPE</a></li> 
 
       <li><a href=".html" title="">AUSTRALIA</a></li> 
 
\t    <li><a href=".html" title="">ASIA</a></li> 
 
    \t  </ul> 
 
     </nav> 
 
\t </div> 
 
</header>

Answer 2

私はuがachiveたいものを十分に理解した場合、すぐ下のような手順を行います。

1. Uは（私たちはの絶頂を維持したいセレクタH1にフロートを削除する必要があります私たちのロゴdiv）
2. ナビとロゴを1つにするdivを作成します（私は彼にクラス.allを与えました）。最後に
3. だけヘッダH1から背景色を削除し、ドットテル

ul{ 
 
\t \t list-style: none; \t \t 
 
} 
 
.all { 
 
\t background-color:rgba(0,0,0,0.5); 
 
} 
 
header{ 
 
\t width: auto; 
 
\t background: url(pictures/heading-zebras-2.png) no-repeat 50% 0; 
 
\t -webkit-background-size: cover; 
 
\t background-size: cover; 
 
\t height: 450px; 
 
    
 
} 
 

 
header h1{ 
 
\t padding: 40px 0 34px 43px; 
 
\t width: 437px; 
 
} 
 

 
.tel { 
 
\t display: inline-block; 
 
\t height: 60px; 
 
\t padding: 30px 87px 0 0; 
 
\t width: cover; 
 
} 
 

 
.tel li { 
 
\t list-style-type: none; 
 
\t display: inline; 
 
} 
 

 
.tel a{ 
 
\t font: 28pt/0.64 "Consolas", Arial, Helvetica, sans-serif; 
 
\t color: white; 
 
\t padding: 0 0 0 50px; 
 
\t font-size: 87.5%; 
 
}

<header> 
 
    <div class="all"> 
 
    <div> 
 
     <h1> 
 
     <a href="homepage.html"><img src="pictures/header-banner-text.png" alt="banner"></a> 
 
     </h1> 
 
    </div> 
 
    <div class="tel"> 
 
     <nav> 
 
      <ul> 
 
      <li><a href=".html" title="">AMERICAS</a></li> 
 
      <li><a href=".html" title="">AFRICA</a></li> 
 
      <li><a href=".html" title="">EUROPE</a></li> 
 
      <li><a href=".html" title="">AUSTRALIA</a></li> 
 
      <li><a href=".html" title="">ASIA</a></li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</header>