1

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

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

我的问题是...如何放置徽标，使其始终出现在 320px 宽及以下的屏幕尺寸的文本框下方（无论文本框高度如何）？

#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

I'm sure you figured this out by now - but one approach that can sometimes be useful is to put the same logo twice in the HTML and show or hide the one you want depending upon the width. I find this to be more maintainable, and obviously if the image has the same URL then there's minimal overhead. Absolute positioning is no fun.

// 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 回答