如何使這個正確的內容響應？

我想這個＃內容是這樣http://i.imgur.com/tunmL9B.jpg 如果是在較小的screens.The＃內容應根據屏幕大小如何使這個正確的內容響應？

萎縮，如果是在大屏幕上，我希望它佔據儘可能多的，因爲它可以這樣http://i.imgur.com/xB6bNsU.jpg。我該怎麼做？

#wrapper{ 
width:100%; 
} 

#sidebar{float:left;width:250px;} 
#content{float:left;width:900px} 


.post{ 
margin:0px 0px 25px 0px; 
padding:0px 0px 15px 0px; 
} 

.post .date{ 
float:left; 
width:50px; 
height:50px; 
font-size:18px; 
margin:0px 25px 0px 25px; 
line-height:24px; 
text-align:center; 
} 


.post h2{ 
font-size:20px; 
line-height:24px; 
}

謝謝！

來源

2014-01-23 Mixin

請參見本的jsfiddle使用完整的HTML http://jsfiddle.net/7HgcA/ – Mixin

你應該總是嘗試張貼在本網站之前，谷歌上搜索您的問題。谷歌搜索「響應式網頁設計」將回答你的問題。 – apohl

只要寫

#sidebar{ float:left; width:250px;} 
#content{ margin-left: 250px; }

側邊欄將十個分量它的寬度，而你的內容將一起成長的視口的寬度。這裏Mediaqueries是不是真的有必要，所以這個例子中，即使工作在IE<9

例小提琴：http://jsfiddle.net/wn6fx/

來源

2014-01-23 14:22:27 fcalderan

你會想用百分比的寬度，而不是設置寬度明確

這裏是你現在擁有的一切：

#sidebar{float:left;width:250px;} 
#content{float:left;width:900px}

這裏是你如何可以改變它：

#sidebar{float:left;width:20%;} 
#content{float:left;width:80%;}

這樣，無論屏幕大小（或實際上，父元素的大小），邊欄總是佔用20％（所以20% * 1000px = 200px和20% * 100px = 20px等），內容將始終佔80％。

媒體查詢

然而，歸根結底，這只是起點響應。想象一下，有人從實際只有100px寬的設備訪問此頁面。您可能想要開始堆疊元素，而不是並排放置元素。這可以用一個媒體查詢來完成：

@media all and (max-width: 360px) { 
    #sidebar, #content { 
    float: none; 
    width: 100%; 
    } 
}

此媒體查詢將動態更新爲是< = 360像素任何觀察窗中的相應元件的CSS。在這種情況下，它會使每一個佔據屏幕的整個寬度。

這只是使您的網站響應的開始！祝你好運！

編輯

如果你絕對必須保持250像素寬度的側邊欄，然後Fabrizio's answer是一個更好的解決方案。

來源

2014-01-23 14:22:08

我不希望側欄「響應」我希望它的寬度固定爲250px。如何讓#content響應而不改變邊欄的寬度 – Mixin

嗯......讓我再玩一下這把小提琴，我會更新我的答案 –

好像這就是我正在尋找的... 謝謝！！ – Mixin

我覺得最缺少什麼，他是要求。他實際上希望文本隨着div的縮小而縮小。我不認爲這可以用你想要的方式用CSS來完成。您可以編寫媒體查詢，因爲div的大小縮小以改變字體的大小，但這不是一個平滑的效果。你很可能需要使用JavaScript來達到這個效果。順便說一句，你鏈接的這個例子並不是真正的「敏感」。如果您嘗試在手機上查看該文件，則該文本將無法讀取，因爲文本會像6px。

來源

2014-01-23 14:25:49

我相信大多數人認爲他意味着迴應的原因是因爲很難理解爲什麼你會希望字體大小發生改變。我明白，如果只是爲了更改標題大小，但對於內容而言，屏幕大小並不會更改用戶閱讀時最適合的字體大小。 – apohl

我並不假裝我知道爲什麼......只是說它被混淆了。如果你看看他鏈接的例子，就會顯示出他想要的東西。我假設也許這是一個學校項目或其他什麼東西，因爲它不是正確的方法來使其響應。 –

嘗試

sidebar{width:250px;float:left;} 
content{margin-left:250px;}

來源

2014-01-23 14:26:45 RichTea

這與我的回答有何不同？ – fcalderan

這是正確的答案，我沒有見過你的。 – RichTea

如何使這個正確的內容響應？

回答

相關問題