私は、当社のメイン Web サイトのモバイル フレンドリー サイトの構築に取り組んでいます。設計方法は、Retina の約 2 倍です。私が計画しているのは、メイン コンテンツを最大幅 640px 前後に設定し、幅を 100% に設定することです。うまく収まる特定の背景画像があります。しかし、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;
}