Question

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

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

我的问题是......如何在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;}
}

Desired Layout on mobile

Answer 1

我确定你现在已经想到了这一点 - 但有时候有用的一种方法是在HTML中放两次相同的徽标，根据宽度显示或隐藏你想要的徽标。我发现这更易于维护，显然如果图像具有相同的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
   }
}

绝对定位和媒体查询

1 个答案: