重新打磨我的CSS排版功力-1－中意悾間

最近認真的在練習Node.js的後端應用，不論前後端是否有分離，為了要顯示自已做的成果，前端必然需要修飾一下，觀看成果是否良好(總不能單看JSON，太痛苦了)；

不過，發現自己已經相當生疏，經常排個版都需要花費不少時間研究(即便用Bootstrap也是很花時間)；

所以決定到CSS-TRICKS找幾篇文章複習，
率先來看一下Media Queries，是響應式網頁排版基礎起手式，
於是挑到這篇文章，"A Complete Guide to CSS Media Queries" `，
在CSS-TRICKS GUIDES下的一篇「CSS 媒體查詢完全指引」
(第一次刊登時間2020年10月2日，最新更新日2021年5月26日，由 Andrés Galante 撰寫)，
一起來看看吧！

首先聲明：這僅是翻譯文章，僅提供英文不慎良好的朋友們參考，內容有誤請告訴我唷！
另外，”媒體查詢”這個翻譯很不自在，因此下文翻譯都將使用media queries表達。

Media queries 可以依照網頁或app所被開啟的使用者裝置、瀏覽器或系統設定，來調整排版外觀(或是表現形式)；
Media queries 依照一定的特性(characteristics)、特徵(features)、與使用者偏好，
來套用style(風格，同上，翻譯起來不自在，將使用原文)或運行套用在其上的程式碼。

或許，大多數的media queries都是針對viewport(視埠)大小套用客製化style(如下)，這也是響應式設計(responsive design)誕生的原因。

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
.element {
/* Apply some styles */
}
}
上述範例，除了viewport寬度外，其實還有許多其他的東西可以套用；
可以是螢幕解析度(screen resolution)、
裝置方向(device orientation；landscape橫向，寬度大於高度，或portrait直向，高度大於寬度)、
運行的系統偏好、
或甚至是上述三項的組合，都可以做為查詢media的項目來套用style。

在開始正式介紹 media queries 前，來分享除了CSS以外，
也可以在HTML與Javascript來設定(如果要直接進入CSS的部分，請直接到下篇文章)，本篇先簡述三種可運用 media query的地方。

HTML：

在<head>標籤內使用<link>，使HTML依照不同media queries來決定連結的CSS檔
<html>
<head>
    
    <link rel="stylesheet" href="all.css" media="all" />
    
    <link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
    
    <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
    
    <link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
    
    <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
    
    <link rel="stylesheet" href="print.css" media="print" />
</head>

</html>
為何要這樣做？這樣可以提供較良好的分開不同需求的裝置，減少使用者下載CSS檔的需求。
但是，這不會並總是可以成功避免”不符合media queries的檔案被下載”，而僅是被排在較低的下載順序；

所以，小型螢幕，例如手機，將只會下載符合裝置的media query，
而較大螢幕的，例如筆電，將會下載全部的media queries，因為它有可能會符合所有的viewport大小(上述media query例子不會下載print列印的那一個)

上面使用<link>來操作media query，另一篇文章(guide to responsive images響應式圖片) 中，
在HTML也可以在<picture>標籤中使用<source>來告知瀏覽器應該使用哪一個圖片的樣式檔案，範例如下：
<picture>

<source srcset="cat-landscape.png" media="(min-width: 800px)">

<source srcset="cat-cropped.png" media="(min-width: 600px)">

<img src="cat.png" alt="A calico cat with dark aviator sunglasses.">
</picture>
相同的，這也可能可以是讓整體網頁效能提高的方法，但並非所有裝置都可以避免下載不必要的style檔案。

最後，也不要忘記，可以直接在HTML中使用<style>標籤直接撰寫media queries，例如：
<style>
p {
    background-color: blue;
    color: white;
}
</style>
<style media="all and (max-width: 500px)">
p {
    background-color: yellow;
    color: blue;
}
</style>

Javascript：

是的！我們也可以用Javascript套用media queries，他們就跟在CSS檔案中使用的方式大同小異；
微小的差異在於，需要先用 window.matchMedia() 來定義狀態。

舉例來說，我們想要在瀏覽器最小有768px寬度十，在終端機印出一段訊息，
我們先定義一個const(常數)呼叫window.matchMedia()
// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )

當獲得瀏覽器符合media query時，在終端機印出 ‘Media Query Matched’
// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )

// Note the `matches` property
if ( mediaQuery.matches ) {
console.log('Media Query Matched!')
}

不過有個問題，
當瀏覽器開啟時，它只讀取一次瀏覽器狀態，
之後將瀏覽器放大縮小變形，都不會再改變media query，
除非使用者重新整理網頁；

有個簡易的好方法可以解決這個問題，
那就是將mediaQuery這個const(常數)加到監聽器(listener)，
在監聽事件發生時重新檢查mediaQuery：
// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
// Then log the following message to the console
console.log('Media Query Matched!')
}
}

// Register event listener
mediaQuery.addListener(handleTabletChange)
// Initial check
handleTabletChange(mediaQuery)

可以看看Marko Ilic完整的文章 “Working with JavaScript Media Queries” ，
有更深入的Javascript media queries討論，
文章中也有比較舊版Javascript resize事件監聽(檢查window.innerWidth或window.innerHeight)的使用方法比較。

CSS：

最後，CSS設定media query是最常見的方式，直接在stylesheet使用@media的規則，內部包含標籤(或class、id等等)與條件等，當瀏覽器符合條件時，即套用對應的style：
/* Viewports between 320px and 480px wide */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.card {
background: #bada55;
}
}

也可以在CSS檔中import(匯入)其他CSS檔案，
但一般建議避免使用@import，會造成效能低落，
原因可以看這篇文章，(原因：因其無法平行運行，造成效能低落)

這是有關media query的前情提要，下篇文章將正式介紹CSS的media query