彈性調適型的「RWD」網頁設計技巧
發表於 : 2024年 5月 29日, 22:45
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 版面配置的方法。
這裡只是一些讓你瞭解概念的例子而已：
設計「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, ...) 選擇最大值。
如何使用 CSS 建立響應式 iframe
<iframe style=" width: 100%; height: calc(100vw *.5625) ;" src="https://...."></iframe>
iframe { width: 100%; height: calc(100vw *.5625) ;}
iframe { width: 100%; aspect-ratio: 19/6;}
之前認為已有 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 以上 ~ 要執行的區塊
}
隨著現今行動裝置的多樣化和普及，網頁的技術近年來也開始重視手機上的視覺效果。
於是出現(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>
<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>
CSS
.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 以下，就依照原來網頁撰寫的順序。.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; }
}
關於 display: flex 屬性
Flexbox 代表的是一整個模組，其屬性有分為是要用在外容器 Flex container 的, 另一些則是用在內元件子項目 Flex item 上。
Flex 與 Menu 清單 UL 來說都有共同的特徵，寫法相似，就是他們有分為不可見的外容器與內元件。
首先要把 container 外容器宣告為 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>
<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 標籤元素
擁有和媒體查詢一樣的功能， 可依不同螢幕解析度，置換不一樣大小的圖片
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>
<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, ...) 選擇最大值。
如何使用 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;
}
iframe { width: 100%; aspect-ratio: 3/2;}
</style>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/watch?v=1E8GrG6-AJA"></iframe>
</div>
直接在 <IFRAME> 設定CSS 的方法<iframe class="responsive-iframe" src="https://www.youtube.com/watch?v=1E8GrG6-AJA"></iframe>
</div>
<iframe style=" width: 100%; height: calc(100vw *.5625) ;" src="https://...."></iframe>
iframe { width: 100%; height: calc(100vw *.5625) ;}
iframe { width: 100%; aspect-ratio: 19/6;}
之前認為已有 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 以上 ~ 要執行的區塊
}