CSS 版面配置 -5－❤️灰鴿❤️

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 以上 )

你還可以使用 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 xxxxx

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

.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