【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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,內容變成以兩欄呈現。



看實際網頁 》


沒有留言: