卡住此佈局上媒體查詢的最佳方法

我正在嘗試學習響應式設計。我正在建立一個網站，其中一個網頁是一個投資組合。我建立了以下如何佈置此頁面的模型。這當然是一個非常簡潔的版本。我似乎無法應用正確的查詢，因此這種格式在寬屏桌面，ipad上可以顯示，並且可以說一部手機。我開始了第一個查詢，但它當然不工作，也知道這是否是常見寬屏桌面的最佳尺寸。卡住此佈局上媒體查詢的最佳方法

任何人都可以讓我開始如何應用這個頁面？我將繼續教程，但需要在這裏啓動一個開始。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
<style type="text/css"> 
@media screen and (max-width:1080px) { 
    #main { 
     width: 960px; 
    } 
} 
body { 
    background-color: #FFF; 
    margin:0; 
} 

#main { 
    width: 1080px; 
    margin-right: auto; 
    margin-left: auto; 
    height: 860px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
.box { 
    background-color: #CCC; 
    height: 200px; 
    width: 200px; 
    margin-right: 20px; 
    float: left; 
    margin-bottom: 20px; 
} 
.box_last { 
    background-color: #CCC; 
    height: 200px; 
    width: 200px; 
    float: left; 
    margin-bottom:20px; 
} 
.box_bottom { 
    background-color: #CCC; 
    height: 200px; 
    width: 200px; 
    margin-right: 20px; 
    float: left; 

} 
.box_last_bottom { 
     background-color: #CCC; 
    height: 200px; 
    width: 200px; 
    float: left; 

} 
</style> 
</head> 

<body> 
<div id="main"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box_last"></div> 

    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box_last"></div> 

    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box_last"></div> 

    <div class="box_bottom"></div> 
    <div class="box_bottom"></div> 
    <div class="box_bottom"></div> 
    <div class="box_bottom"></div> 
    <div class="box_last_bottom"></div> 
</div> 
</body> 
</html>

來源

2012-11-16 DC1

我覺得共同在外面使用負利潤最DIV，使內div可以有正邊距（讓它們之間有間距），但是沒有空間用於第一個/最後一個元素。如果你願意，我可以更好地解釋。 – Kubee

在您當前的代碼中，來自媒體查詢塊的#main正在被覆蓋。你必須把你的媒體查詢你的CSS

#main { 
    width: 1080px; 
    ... 
} 

@media screen and (max-width:1080px) { 
    #main { 
     width: 960px; 
    } 

    .box { 
     width: 200px; 
     ... 
    } 
}

的最底部，然後一個小屏幕

@media screen and (max-width: 480px) { 
    #main { 
     width: 100%; 
    } 

    .box { 
     width: 50%; 
     ... 
    } 
}

來源

2012-11-16 20:16:22

非常感謝您的答覆。我已經應用了代碼但仍然沒有任何反應？ – DC1

我已經設置了一個快速小提琴 - http://jsfiddle.net/Aw2yG/只是調整渲染的輸出窗口，看看如何更改框 –

謝謝sooo多！我真的很感謝你的幫助。看起來我錯過了在樣式下移動媒體查詢的一步。嘿，我只是在你的個人資料中看到你的網站我將通過電子郵件通知您可能的開發工作。再次感謝！ – DC1

卡住此佈局上媒體查詢的最佳方法

回答

相關問題