RWD 動態多欄呈現

CSS支援多欄格式的文字內容呈現,例如以下的文字內容:



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



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

article {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
}

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

@media screen and (min-width:1281px) {

    article {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
}

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



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



看實際網頁 》


沒有留言: