前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 看成為 CSS 的擴充元件(這樣也會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type,也是本篇文章要講解重點),再針對這些 Media Type 定義其樣式 (Media Features,中文譯作「媒體樣式」或是「媒體特徵」)。
Media Query 使用方法
如果前端工程師要在HTML5或CSS中使用 Media Query ,則使用方式有下列三種:
1. 在HTML5 中使用,以下範例為用 media 屬性判斷使用者的裝置大小:當螢幕小於 400 px 時,套用指定的 CSS 檔案「Screen.css」:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">
2. 上面的功能,如果使用 CSS 中使用,則為:
@media screen and (max-device-width: 400px){...}
3. 你也可使用 @import
@import "screen.css" screen and (max-device-width: 400px)
但若你的圖片用途是作為 Local SEO 的話,也許就要保留 Exif 的資訊了。雖然 Google 官方到目前為止並未表明他們的搜尋引擎會抓取 Exif 中的 GPS 經緯度座標,來影響地區性的 Google 搜尋引擎排名,但是大多數的 SEO 專家都認為 Exif 中的地點資訊對於該地區的搜尋引擎排名有一定的影響。
Google 也提供了三個能將圖檔尺寸最佳化的開放工具:Guetzli、MozJPEG以及pngquant。Google 提供的使用說明在這裡。若你這些工具都用不習慣的話,那就用 ImageOptim 吧!Windows 及 Linux 使用者請到這裡下載。使用方法很簡單,只要丟入你的圖片即可最佳化尺寸!
至於要選哪一個工具最好呢? SEO 工具 Ahrefs 的部落格針對上面所說的大圖片最佳化的工具之外,也測試了其他的工具。