iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 9

Day 9 用 WordPress 看 CSS 樣式:版面配置 (grid 與 @media)

  • 分享至 

  • xImage
  •  

昨天我們說明了 flex 以直線為排列單位的配置樣式。今天,我們要再來進一步的探討 grid 這種版面樣式。

display: grid;

事實上,grid 的設計並不是要取代 flex 的。在當代網頁開發中,flexgrid 是相輔相成的。前者負責直線的排版,後者則進行平面排版。

樣式 grid 的基本語法如下:

選擇器 {
    display: grid;
    樣式屬性: 屬性值;
}

有關 grid 的完整介紹,可以參考 CSS Tricks 的文章,中文文章的話,可以參考 wcc723 的文章,也有相當完整的介紹。

樣式屬性 | 屬性值 | 說明
-------+-------+-------
grid-template-columns | 個別欄位寬度/repeat | 可以指定每一欄的寬度,除了常見的單位 (px/em/rem) 外,還有一種 grid 專屬的特殊單位 fr。
grid-template-rows | 個別列高度/repeat | 可以指定每一列的高度,支援的單位與 columns 一樣。
grid-template-areas | "子層級 grid 區域名稱" | 定義子層級的區塊名稱。
grid-column-gap | px/em/rem | 指定每一欄之間的間距。
grid-row-gap | px/em/rem | 指定每一列之間的間距。
grid-gap | {px/em/rem} {px/em/rem} | 先指定列間距,再指定欄間距。

這裡補充說明一下 grid-template-areas 的定義方式,是很直接的把你要界定範圍的區域寫下來:

grid-template-areas: 
    "header header header header
     sidebar content content content
     sidebar content content content
     sidebar content content content
     footer footer footer footer";

除了定義區域外,前面也提到 grid 的特殊單位:fr。這個單位並不是固定值,而是參考子層級元素的大小決定。舉例來說,目前子元素中,有一張 600px 寬的照片,這時所有子層級元素的 1fr 就會是 600px。這一點對計算 grid 的版面非常重要。

子層級樣式屬性

flex 的子層級項目不同,grid 的子層級元素必須要指定格線間的位置。因為是用「線」來計算,因此如果今天指定的區塊有 3 欄,那麼對齊的格線就會是 1 ~ 4。那麼,我們就來看一下子層級元素所需要的樣式屬性:

樣式屬性 | 屬性值 | 說明
grid-column | 開始格線 / 結束格線 | 舉例來說,如果要佔滿 3 欄,那就是 1 / 4。
grid-row | 開始格線 / 結束格線 | 如果要佔據第 2 列,那就是 2 / 3。
grid-area | 對齊的區域 | 需要對應到 grid-template-area 定義的區域。

Twenty Twenty 的樣式中,並沒有使用 grid 的樣式屬性,但我們可以在區塊編輯器中的 [媒體及文字] 區塊找到 grid 的蹤跡。
我們看到 wp-includes/css/dist/block-library/style.css 的第 928 行:

/* wp-includes/css/dist/block-library/style.css Line 928 */
.wp-block-media-text {
    /*!rtl:begin:ignore*/
    direction: ltr;
    /*!rtl:end:ignore*/
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 1fr;
    grid-template-columns: 50% 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto; 
}
.wp-block-media-text.has-media-on-the-right {
    -ms-grid-columns: 1fr 50%;
    grid-template-columns: 1fr 50%; 
}

當我們使用 [媒體及文字] 區塊時,便先固定 50% 的寬度給媒體,剩下的則是文字說明區塊。

回應式設計的重點:@media

我們能不能寫一組 HTML 就把手機版跟電腦版的網站都做好?

事實上,即便到今天,將手機版與電腦版分開製作,仍是許多網站的主要做法。如果手機版的網站與電腦版的網站在功能上有根本的不同,那這樣的做法其實非常合理,也應當這麼做。

但這個世界大多數的網站並不會有功能上的根本差異,頂多是「顯示/不顯示」特定元素的差異。

因此,回應式網站 (Responsive Website) 出現了。藉由偵測螢幕寬度的方式,去改變樣式或是啟用特定功能。用來實踐偵測螢幕寬度的作法,便稱為媒體查詢 (media query)。

媒體查詢的基本語法如下:

@media screen and ( max-width: 600px ){
    /* 在螢幕寬度 600px 以下的樣式 */
}
@media screen and ( min-width: 600px ){
    /* 在螢幕寬度 600px 以上的樣式 */
}

這裡的 screen 指得是在 <head><link> 屬性 media 的 ```screen````:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

如果樣式有針對列印的 print 去定義樣式,那也可以使用 @media print 的方式去定義樣式。

我們在 Twenty Twenty 的 style.css 的第 4534 行:

@media ( min-width: 660px ) {

	/* Blocks -------------------------------- */

	/* BLOCK: GALLERY */

	figure.wp-block-gallery.alignleft {

		/*rtl:ignore*/
		margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
	}

	figure.wp-block-gallery.alignright {

		/*rtl:ignore*/
		margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
	}

上述的這段樣式,重新定義了在 660px 以上的區塊時,[圖庫] 區塊的左右邊界。

結語

今天介紹了與版面配置的 grid 屬性,以及回應式設計中最重要的媒體查詢 (media query) 概念。
關於版面配置的區塊,就先介紹到這邊。下一章,將重新回頭介紹一般 CSS 的入門樣式「標題與字型」。


上一篇
Day 8 從 WordPress 看 CSS 樣式:版面配置 (flex)
下一篇
Day 10 用 WordPress 了解 CSS 樣式:標題與字型
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言