1

私は、応答性が必要な非常に基本的な 1 ページ レイアウトに取り組んでいます。1 つの大きな背景画像と、その周囲に絶対配置された 2 ～ 3 個の div で構成されます。http://www.reversl.net/demo/絶対配置を使用する理由は、背景画像の高さを変える必要がありますが、テキスト ボックスは常に画像の下部から同じ距離に配置する必要があるためです。

また、ページの右下にロゴを配置する必要があります。デスクトップデバイスで表示すると、すべてがうまく機能します。しかし、スマートフォンでは画面が小さいため、メディア クエリを使用してテキストの下にロゴを配置する必要があります。ここに問題があります....テキストdivが絶対に配置されているため....小さな画面ではロゴが背後に隠れています。私が最初に考えたのは、ロゴに上からの絶対位置を与えて、幅 320 ピクセル以下の画面サイズで常にテキスト ボックスの下に表示されるようにすることでした。ただし、テキスト ボックスの高さを変える必要があるため、この方法では作業できません。

私の質問は... 幅 320 ピクセル以下の画面サイズで (テキスト ボックスの高さに関係なく) 常にテキスト ボックスの下にロゴが表示されるようにするにはどうすればよいですか?

#bg {
max-width: 100%;
margin: 0;
padding: 0;
position: relative;
}

#title {
margin: 0;
padding: 0;
color: #f0f0f0;
background: #333;
margin: 0;
padding: .5em 1em;
width: 250px;
position: absolute;
top: -2%;
text-align: center;
}

#content {
background: #333;
width: 250px;
position: absolute;
top: 85%;
padding: .5em 1em;
color: #888;
text-align: center;
border: 1px solid #444;
}

footer {
margin: 0;
padding: 0;
}

.logo {
float: right;
width: 50px;
height: 25px;
border: 1px solid #444;
text-align: center;
padding: .5em;
color: #666;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

#title {top: -17%;line-height: 1;}
}

モバイルでの望ましいレイアウト

4

1 に答える 1

2

もうお分かりだと思いますが、HTML に同じロゴを 2 回配置し、幅に応じて必要なロゴを表示または非表示にする方法が役立つ場合があります。これはより保守しやすいと思います。明らかに、画像の URL が同じであれば、オーバーヘッドは最小限に抑えられます。絶対的なポジショニングは面白くありません。

// mobile
@media only screen and (max-width : 319px) 
{
   .logo.right-justified 
   {
       display: none;     // hide right logo
   }
}

// desktop
@media only screen and (min-width : 320px) 
{
   .logo.underneath
   {
       display: none;     // hide bottom logo
   }
}
于 2013-05-07T00:44:56.433 に答える