Media Queries 媒體查詢

隨著現今行動裝置的多樣化和普及，網頁的技術近年來也開始重視手機上的視覺效果。
於是出現(Responsive Web Design)簡稱RWD，響應式網頁設計的概念，又稱適應性網頁、自適應網頁設計、回應式網頁設計。

「RWD」彈性調適型的網頁設計，大部份就是指 CSS Media Queries 這個技術的應用。「媒體查詢」是完成「響應式設計」最強大的工具，透過CSS，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠呈現得更完美，由於是由同一份網頁內容轉變，以後要修改比較輕易。

在製作 Responsive Web Design 的網站時，大致上會區分為三個不同的 CSS 版型：

智慧型手機尺寸( 320 X 480 )
平板電腦尺寸( 401 X 641 ~ 768 X 1024 )
一般電腦螢幕尺寸( 768 X 1024 以上 )

最大寬度查詢

@media only screen and (max-width: 600px) {...}

這個查詢的真正意思是“如果 [device width]小於或等於600px，那麼做 {...}”

最小寬度查詢

@media only screen and (min-width: 600px) {...}

這個查詢的真正意思是“如果 [device width]大於或等於600px，那麼做 {...}”

組合查詢表達式

@media only screen and (max-width: 1600px) and (min-width: 800px) {...}

上面的查詢只會針對 1600-以下 800-以上像素寬的螢幕觸發

你還可以使用 meta viewport 讓你的版面配置在行動裝置的瀏覽器上呈現得更完美。
viewport tag 的定義只對mobile device有用，用來控制 mobile device 顯示網頁內容時的一些設定。
<meta name=”viewport” content="width=device-width"> 設定說明與預設值 @viewport { width: device-width; }

彈性盒子布局（Flexbox）和網格布局（Grid）：這些新的CSS佈局模型提供了更靈活的方式來管理和排列內容，能夠輕鬆地調整布局以適應不同裝置。

使用 Flexbox + Media Queries 來配置簡單的版面

新的 flexbox 技術重新定義了使用 CSS 版面配置的方法。
這裡只是一些讓你瞭解概念的例子而已：

HTML <div class="wrapper">

<header class="header"><img ... width="100%" /><header>

<article class="art"> ... </article>

<aside class="aside aside-1">Aside 1 </aside>

<aside class="aside aside-2">Aside 2 </aside>

<footer class="footer">Footer</footer>

</div>

RWD回應式網頁設計，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站。
Flexbox 與 Grid Layout 是一種新的 CSS 3 佈局模式，或許會是未來的主流

Aside 1
把滑鼠游標移過來看看

Aside 2
把滑鼠游標移過來看看

Footer

.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}

.wrapper > * {
padding: 10px;
flex: 1 100%;
}

.footer {
background: lightgreen;
margin-top:3px;
}

.art {
text-align: left;
background: deepskyblue;
}

.aside-1 {
background: gold;
}

.aside-2 {
background: hotpink;
}

/*如果螢幕寬度為 600px (含) 以上，就套用這些 css 設定*/
@media all and (min-width: 600px) {
.aside { flex: 1 0px; }

}

/*如果螢幕寬度為 800px (含) 以上，就套用這些 css 設定*/
@media all and (min-width: 800px) {
.aside-1 { order: 1; }
.art { order: 2; flex: 3 0px;}
.aside-2 { order: 3; }
.footer { order: 4; }
}

如果螢幕寬度為 600px 以下，就依照原來網頁撰寫的順序。

關於 display: flex 屬性

Flexbox 代表的是一整個模組，其屬性有分為是要用在外容器 Flex container 的, 另一些則是用在內元件子項目 Flex item 上。

Flex 與 Menu 清單 UL 來說都有共同的特徵，寫法相似，就是他們有分為不可見的外容器與內元件。

首先要把 container 外容器宣告為 Flex

接下來這些屬性，才會有作用

Flex 外容器屬性：

flex-direction /*決定 flex item 的排序方向，預設值 row 就是由左至右*/
flex-wrap /*換行方式，預設值 nowrap 只會排成一排*/

flex-flow ~/*是以上2個屬性的單行寫法，預設值是 flex-flow : row nowrap;*/
justify-content /*設定主軸的對齊方式，預設值flex-start 主軸的起始點*/
justify-content: flex-start | flex-end | center | space-between | space-around
align-items /*沿著側軸(cross axis)對齊排列，預設值flex-start 副軸的起始點*/
align-items: flex-start | flex-end | center | baseline | stretch
align-content /*多行的排列對齊方式，預設值flex-start 對齊 container 側軸的起始點*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch

Flex 內元件屬性：

order /*子項目 Flex item 的排列順序*/
align-self /*子項目 item 的個別對齊*/
flex /*是以下3個屬性的單行寫法，預設值如下面個別屬性的預設值*/

flex-grow /*伸展時的空間分配，預設值 0 不會縮放*/
flex-shrink /*收縮時的空間分配，預設值 1 會隨著縮放調整大小*/
flex-basis /* item 的初始值，預設值 auto*/

關於 picture 標籤元素

擁有和媒體查詢一樣的功能，可依不同螢幕解析度，置換不一樣大小的圖片

設計「RWD」彈性調適型的網頁，除了 CSS Media Queries 「媒體查詢」這個技術的應用以外，還要能了解善於應用相對計算數據單位。

相對計算數據單位 >> %, em, rem, vw, vh, vmin, vmax 。
限制最大、最小數據 >> max-width, min-width, max-height, min-height。

calc(expression) 一個數學表達式，結果將作用於值。可以使用以下運算符：+ - * /

min(value1, value2, ...) 選擇最小值。

max(value1, value2, ...) 選擇最大值。

使用這些相對單位來設置元素的寬度、高度、邊距和填充，而不是使用固定像素值。
這樣可以使元素根據視口大小彈性調整，從而適應不同尺寸的螢幕。

通常 DIV 區塊和圖片，都有 max-width、min-width，max-height、min-height 來彈性調整大小。

也可以使用 aspect-ratio: 16/9; 屬性來限制固定寬高比率。

可是文字就沒有這些屬性可用，所以、我都使用、選擇最小值 min(value1, value2, ...) 或選擇最大值 max(value1, value2, ...)，讓文字能夠依據螢幕大小做動態調整。

下面這個範例、為取最小值的範例，輪播器的高度設定，不需要用 ~ 媒體查詢來設定斷點，就能自我調整符合「RWD」的設計。

拉動縮放畫面，看看效果怎樣 ?!

.slider_container { height: min(60vw,100vh);} 相等效於 = max-height: 100vh; height: 60vw;

其工作原理為，最大高度為，可視範圍的 100% (100vh)，當螢幕的 60% 寬度，小於最大高度 100% 時，改取(60vw) 螢幕寬度 60% 的值。

以下是使用寬高比，來限制固定元素 ~

如何使用 CSS 建立響應式 iframe

position: relative;

width: 100%;

overflow: hidden;

padding-top: 100%; /* 1:1 Aspect Ratio */

}

/*
padding-top: 56.25%; 16:9 Aspect Ratio (divide 9 by 16 = 0.5625)

padding-top: 75%; 4:3 Aspect Ratio

padding-top: 66.66%; 3:2 Aspect Ratio

*/

.responsive-iframe {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

border: none;

}

iframe {

width: 100px;

aspect-ratio: 3/2;

}

</style>

</div>

</body>

直接在 <IFRAME> 設定CSS 的方法

<iframe style=" width: 100%; height: calc(100vw *.5625) ;" src="https://...."></iframe>

iframe { width: 100%; height: calc(100vw *.5625) ;}

iframe { width: 100%; aspect-ratio: 16/9;}

之前認為已有 CSS Media Queries 媒體查詢可使用，JavaScript 的 matchMedia() 函數，應該用不到，後來發現有些地方有時還是需要用到，所以、把它加進來

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

if (window.matchMedia("(max-width: 800px)").matches) {

螢幕寬度 800px 以下 ~ 要執行的區塊

} else {

螢幕寬度 801px 以上 ~ 要執行的區塊

}

在設計行動版 RWD 版面的時候 ~

除了頁面本身的內容，還需要考量網址列、工具列等位置，在某些情況下vh 單位是無法準確反映出可視窗口高度的問題，於是 CSS 新增了三種單位。

小型可視區域 (Small Viewport Units)：svh
大型可視區域 (Large Viewport Units)：lvh
動態可視區域 (Dynamic Viewport Units)：dvh

svh 小型可視區域

svh 則會計算網址列與工具列，扣掉瀏覽器UI元素後的安全可視區域高度百分比。例如：在具有 1080px 像素高度的顯示器上，如果地址欄佔用 100 像素，則 100svh 的值為 980px 像素。

lvh 大型可視區域

lvh 不會計算網址列與工具列，即為螢幕解析度高度百分比。例如：在具有 1080px 像素高度的顯示器上，100lvh 的值為 1080px 像素。

dvh 動態可視區域

dvh 會根據瀏覽器視窗尺寸的變化來調整高度，反映當前可視區域的百分比，這包括了可能隨時出現或隱藏的 UI 元素。例如：在具有 1080px 像素高度的顯示器上，如果瀏覽器的地址欄和工具欄佔用 100px

像素且虛擬鍵盤佔用 200px 像素時，100dvh 的值將為 780px 像素。隨著這些 UI 元素的出現或消失，dvh 的值會動態更新。

5- 版面配置 ~ 媒體查詢「RWD」

最大寬度查詢

最小寬度查詢

組合查詢表達式