Question

我正在尝试一个职位：固定; #header的宽度为100％，最大高度为50px。在大多数Web浏览器的全屏幕上，我无法保证#header中布局的内容是一致的，但是，它很可能适合页面。然而，更大的关注是，在调整内容时，这将看起来完全一团糟。有没有人有一种方法可以扩展这些内容？

以下是我正在做的一个小基本样本

/* --- Footer/Header Area --- */ 
#footer {
height: 70px;
max-height: 70px;
width: 100%;
position: absolute;
background-color: #eee

}

#header {

background-color: #fff;
height: 50px;
max-height: 50px;
line-height: 45px;
width: 100%;
position: fixed;
top: 0;
float:left;
box-shadow: 2px 4px 5px #555;

}



#header img {

/* --- TOGOHERE: >>>> margin: 10px 30px 0 --- */

}

#header h1 {
display:inline-block;
font-size: 1.2em;
font-family:Courier New;
text-align: left;

} 

#header h2 {
display:inline-block;
font-size: x-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}

#header h3 {
display:inline-block;
font-size: xx-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}

Answer 1

您是否可以为每个媒体查询使用替代容器大小。一个用于大屏幕，一个用于中等，一个用于小屏幕，一个用于超小屏幕。

位置：固定; Web浏览器的缩放方法

1 个答案: