css - 绝对定位和媒体查询

Question

我正在处理需要响应的非常基本的单页布局。它包含 一张大背景图片和 2-3 个绝对定位在它周围的 div。 http://www.reversl.net/demo/我使用绝对定位的原因是因为背景图像的高度需要变化，但文本框需要始终与图像底部保持相同的距离。

我还需要在页面右下角放置一个 Logo 。在桌面设备上查看时一切正常。但在智能手机上，由于屏幕较小，我需要使用媒体查询将 Logo 定位在文本下方。现在问题来了……因为文本 div 是绝对定位的…… Logo 在较小的屏幕上隐藏在它后面。我最初的想法是给 Logo 一个从顶部开始的绝对位置，以便它始终显示在 320 像素宽及以下屏幕尺寸的文本框下方。但是，文本框的高度需要变化，所以我不能这样做。

我的问题是...如何放置 Logo ，使其始终显示在 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;}
}

Desired Layout on mobile

Answer 1

我相信您现在已经明白了这一点 - 但有时可能有用的一种方法是在 HTML 中两次放置相同的 Logo ，并根据宽度显示或隐藏您想要的 Logo 。我发现这更易于维护，而且很明显，如果图像具有相同的 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
   }
}