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

Media Queries 媒體查詢
使用 Flex 模式配置版面
「RWD」彈性調適型的網頁設計

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 + 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

<div id="container" style="display: flex;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

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 標籤元素

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

<picture>

  <source media="(min-width:650px)" srcset="img_800px.jpg">

  <source media="(min-width:465px)" srcset="img_500px.jpg">

  <img src="img_380px.jpg" alt="Flowers" style="width: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, ...) 選擇最大值。

---

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

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

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

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

如何使用 CSS 建立響應式 iframe

<style>
.container {

  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;

}

</style>

<div class="container"> 

 <iframe class="responsive-iframe" src="https://www.youtube.com/watch?v=1E8GrG6-AJA"></iframe>

</div>

</body>

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

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

iframe {

width: 100%;

height: auto;

aspect-ratio: 16 / 9;

}