絕對定位和媒體查詢

我正在研究需要響應的非常基本的一個頁面佈局。它包含一個大背景圖像的和絕對位於其周圍的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

絕對定位和媒體查詢

回答

相關問題