如何使div响应屏幕分辨率？

只有当屏幕大小等于我的默认屏幕分辨率时，我的div才能正常工作（占据所有区域）。否则我得到这如何使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>

来源

2016-09-07 Alexander Tolkachev

这是您的固定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>

来源

2016-09-07 08:13:14 casual

但是，如果我想显示'和'头tel'块直列h1'等什么每个人都有不同的身高？ –

已更新代码，以便内联显示横幅和菜单。我建议你看看：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/ – casual

如果我的理解以及ü要才达到什么，只是让像下面的步骤：

ü需要去除浮到选择H1（我们要保持的HIGHT我们的标志div）
创建div让你的导航和标志合为一体（我给他的课程全部），我们想要整个内容的背景。
在刚刚结束的头段H1去除背景色，和.TEL

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>

来源

2016-09-07 11:05:49 minimum

如何使div响应屏幕分辨率？

回答

相关问题