lessframework列網格

Question

我想弄清楚如何使用lessframework構建2 - 3列網格，但如何開始？

在它說CSS代碼：

13列布局 60像素列，24個PX水槽，72頁像素邊距，1212像素總（用於滾動條額外的空間）

在http://lessframework.com/它說8 cols for old browsers and 13 for desktops ... so so added the column grid inside the @media only screen and（min-width：1212px）media query（or add it to a different css file）。

我試圖找到一些例子，但還沒有發現任何有價值的東西。

UPDATE：

看了大衛奧利弗的回答後，我會盡量回答的問題：

• 320：1關口
• 480：1關口
• 768：2山坳
• 1280：3 col

我希望這回答這個問題。

Answer 1

從我看這個框架，我相信這個想法是根據CSS註釋中提供的數字將自己的列CSS插入CSS文件的相關媒體查詢部分。與其他一些CSS列框架不同，您不會將預定義的類名應用於div，而是根據需要將自己的選擇器插入到開始的CSS文件中。

但是，如前所述，這種方法不適用於無法處理媒體查詢的移動設備，因爲默認視圖寬度爲768px或更大。我相信這種方法更好：Rethinking the Mobile Web。另請參閱Notes on designing for mobile phones (even if they’re not made by Apple)

所以，你可以這樣做：

// Stylesheet to set base styles for all browsers - mobile-friendly: 
<link rel="stylesheet" type="text/css" href="css/base.css" /> 

// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider: 
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" /> 

// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider: 
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" /> 

在base.css你不會定義列和把一切自然流動。

在desktop.css，對於內容的三個方面，你可以有這樣的：

div#wrapper { width: 94%; margin: 0 auto; } 
div#nav { width: 30%; float: left; } 
div#content { width: 70%; float: left; } 
div#extra { clear: both; } 

在桌面wide.css，你可以有這樣的：

div#nav { width: 20%; } 
div#content { width: 60%; } 
div#extra { width: 20%; clear: none; float: left; } 

這些百分比不一定是現實的，因爲你有填充或邊距，但希望他們顯示的想法。

我打算在不久後寫下一個全面的方法在my wiki，以防您希望稍後再檢查。

Answer 2

當你說「2-3列的網格」，你的意思是哪種設備？我建議你首先要清楚哪些設備的大小應該有列和多少個。也許CSS會對你更有意義？

此外，我建議採取不同的方法給框架使用一個：即不依賴於最小寬度媒體查詢

首先，建立一個單列的，基本的樣式表。這是爲了給移動用戶（包括那些設備不做媒體查詢的用戶）提供移動友好的體驗，而不需要繁瑣的水平滾動。這是您所引用的方法的優勢。

然後，添加一個包含媒體查詢的樣式表，指定一個像500px這樣的最小視窗寬度。這是爲了添加僅適用於桌面瀏覽器的列布局和其他樣式（例如背景圖像）。

這是一個非常簡短的概述和其他內容，例如讓Internet Explorer使用媒體查詢（需要Javascript），並確保那些不支持媒體查詢的設備不會從最小視口寬度加載背景圖像樣式表將需要額外的細化。我正在編寫我的首選方法，並在完成後發佈更多信息，或者可以返回我的桌面計算機時發佈更多信息。