我正在建设我们公司主网站的移动友好版。它被设计成适用于retina显示器的2倍大小。我的计划是将主要内容设置在最大宽度为640px、宽度设置为100%的div中。我有一张背景图片很适合这样设计。但随着div宽度的缩小,我需要高度也相应地调整。有什么想法吗?
以下是CSS:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}