如果要在不同解析度的螢幕上瀏覽同一個網頁，常常會透過 CSS 的方式製作 RWD 響應式網頁，而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件，只要符合條件，就會替這種媒體套用對應的 CSS 樣式屬性，這個單元會介紹 CSS @media 媒體查詢 ( Media Queries ) 的相關用法。

影片重點：

• 00:01:06 認識 @media
• 00:03:32 使用 media
• 00:04:54 媒體類型
• 00:05:51 媒體特色
• 00:08:27 媒體條件查詢語法
• 00:10:09 媒體條件查詢語法：OR
• 00:11:45 媒體條件查詢語法：AND
• 00:13:05 媒體條件查詢語法：NOT、ONLY
• 00:14:15 media 綜合練習

相關參考：

• 教學文：CSS @media 媒體查詢
• 影片連結：https://www.youtube.com/watch?v=JcNpUEj5qdI

後記

不知道大家有沒有試過 Canva，記得第一次使用時覺得他的介面很混亂就不想用，後來 Canva 做了比較大的改動之後，在一些老師的推薦下我又再次用用看 ( 為了寫教學 )，而且也嘗試使用了 Canva 後來推出的影片剪輯功能。

不過實不相瞞，我覺得 Canva 很多東西都是做半套啦，就是好像全部都能做，但要做到進階的效果卻又全部都做不出來，例如影片剪輯要先把所有素材上傳，光是等待上傳的時間就飽了，而且剪輯時的影音軌道又很難操作，印象中當初試了兩次就放棄了 ( 其中一次是給他機會 )，不過 Canva 的確可以滿足學生基本簡報設計的需求，但如果像是我要拍教學影片，我就完全不會考慮 Canva 惹～ XD

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html