響應式設計和像素最小寬度

我正在學習新的「響應式設計」，我首先明白的一點是我們應該使用百分比來定義我們可以定義的任何東西，最重要的是，width。響應式設計和像素最小寬度

比方說，我有2 inline-block divs。

<div> 
    //Left div 
</div> 
<div> 
    //Right div 
</div>

第一個div，有一個width:50%，第二div有一個width:40%，一切似乎好這裏，他們是彼此的旁邊，當你調整瀏覽器，他們將變得更小。

爲了讓我們阻止他們調整太多（其中事情變得不可讀），我們應該以像素爲單位使用min-width。

如果我爲第一個div設置min-width:200px;，爲第二個div設置min-width:100px;，並且當我調整窗口大小直到第二個div變成第一個div時，一切看起來都不錯。

但是，如果我調整MORE和MORE的大小，width將保持不變，因爲瀏覽器大小小於這些div的min-width，這將導致創建滾動條。

我正在調整大小，以便測試小型分辨率（手機，平板電腦）的外觀應該如何，我在這裏錯過了什麼？這一切都停止了，媒體查詢的作用開始了嗎？或者我可以做更多的事來解決這個問題？

JSFIDDLE

來源

2013-03-02 Ali Bassam

您可以創建的jsfiddle演示您遇到的問題。並非所有響應式佈局都基於百分比寬度。 – Lowkase 2013-03-02 15:07:33

@Lowkase我提供了一個。 – 2013-03-02 15:11:47

如果您認爲媒體查詢可能是這裏的關鍵，那麼您爲什麼不嘗試？如果你確實嘗試過它們，是否有一個原因，他們不適合你的佈局？ – cimmanon 2013-03-02 17:33:26

這是在那裏一切都停止和媒體查詢的作用麼？

基本上，是的。當您覺得您的設計無法再擠入您提供的空間時，媒體查詢就是您需要使用的。在你談論的點上，大約300px的窗口大小（加上頁邊距？），你會希望使用媒體查詢來改變你顯示div的方式，或許它們是視口寬度的100％，並且從而將一個疊放在另一個的上面而不是並排。對於您的示例，這將有效地替代實際條件中的最小寬度。

你想要實現的是一種設計，無論視口大小如何，當視口太小或太大意味着用戶難以使用或閱讀時，媒體查詢提供了現在最好的方式來「重置」佈局以重新注入該新維度的可用性。

我會說你不必擔心設置最小寬度;儘管使用它們考慮Internet Explorer時有強烈的爭議，因爲它不會處理舊版本中的媒體查詢。

來源

2013-03-02 15:12:53 niaccurshi

作爲一個例子：http://jsfiddle.net/9MxtT/1/ – niaccurshi 2013-03-02 16:35:36

你在找什麼叫做響應式佈局。

這裏有幾個參考鏈接可能會幫助您實現響應式佈局。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

來源

2013-03-02 15:13:59 ketan

我會建議你強烈無視這種做法。當佈局不再以可用方式保存您的內容時，請使用媒體查詢更改佈局，請勿設置預定義的「設備」中斷點。以這種方式進行，而不是使用設備中斷點，這樣做可以保證所有內容都可以應對未來，並且意味着您可以將網站作爲標準顯示在任何地方。 – niaccurshi 2013-03-02 16:32:54

響應式設計和像素最小寬度

回答

相關問題