呂高旭｜隨筆。HTML5 ＆ World Wide Web

原文：http://www.kangting.tw/2014/05/rwd_26.html

CSS支援多欄格式的文字內容呈現，例以下的文字內容：

網頁在預設的情形下以單欄呈現區塊中的文字內容，當螢幕寬度超過一定的長度便不利於閱讀，我們可以透過CSS樣式的設定，將其調整如下：



同樣的文件內容，這一次以兩欄呈現，提供比較出色的閱讀體驗。假設上述的文字內容配置於 article 元素，我們需要的CSS樣式如下：
 

其中將column-count設定為 2 即能呈現上述的結果，當然你可以視需要調整所要呈現的欄數。而在前述的書籍展示頁中，只有在螢燭寬度超過 1280px 才考慮以兩欄呈現描述的文字內容，因此所需的媒體查詢樣式設計如下：
 

於書籍頁檢視設定的動態呈現結果，螢寬度度在 1280px 以下以單欄呈現：



一旦螢寬度度超過1280px，內容變成以兩欄呈現。