绝对定位和媒体查询

我正在研究需要响应的非常基本的一个页面布局。它包含一个大背景图像的和绝对位于其周围的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

来源

2012-08-02 Jedda

你有没有考虑过将所有东西都绝对放在手机版上，只是用你想要的方式放置物品，使用边距和填充？ – 2012-08-02 13:38:41

@BillyMoat这可能是一个选项。这可能会很棘手，但由于背景图像的高度不同，但我一定会试一试。干杯! – Jedda 2012-08-03 13:42:20

我敢肯定，你想通了这一点现在 - 而是一种方法，有时可能是有用的是把同样的标识两次在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 
    } 
}

来源

2013-05-07 00:44:56

未来我：使用ems而不是像素，一定要尽可能地阐明类名应该是语义的（即'.primary-logo'或'.secondary-logo'而不是'.underneath'） – 2015-09-20 19:44:04

绝对定位和媒体查询

回答

相关问题