響應式網頁(RWD)
Responsive web design，縮寫為 RWD。是一種設計方式，利用操控 CSS 的方法來改變網頁樣式，網頁內容就可以自由的縮放、移動，好因應各種不同瀏覽器解析度，讓使用者在瀏覽網頁時都可以有最好的瀏覽體驗。
<meta name="viewport" content="">
content 的值有
Width // 寬度
Width-device-width // 寬度為裝置的寬度
Initial-scale // 文檔的初始比例(單位是 %)
Maximum-scale // 設定縮放大小
1
2
3
4
| // 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1" >
// 以下設定可以防止使用者做畫面縮放，將畫面鎖在縮放比例 100%
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
主要是在 CSS 的撰寫，以下進行簡單的介紹：
@media 來定義套用的媒體類型和特性。
媒體類型（Media Type）：可用的類型包含 all (default), print, screen 和 speech。
媒體特性（Media Feature）：常用的類型包含 width, height, aspect-ratio, orientation, resolution，這些類型常常需要給定一個區間，像是 min, max, min-width, max-width, min-aspect-ratio, max-aspect-ratio。
定義媒體類型及同時定義媒體類型和媒體特性
1
2
3
4
5
6
7
8
9
10
11
| // 定義媒體類型
@media screen, print {
/* Styles for screen and print devices */
}
// 同時定義媒體類型和媒體特性，中間需用 and 連接
@media screen and (max-width: 650px) {
body {
background: rebeccapurple;
}
}
|
或是直接寫特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| // max-width 以電腦瀏覽比較為主通常用 max-width 開始寫
// 當解析度小於768px
@media (max-width: 768px) {
body{
background: yellow;
color:black;
}
}
// 當解析度小於375px
@media(max-width: 375px){
body{
background: blue;
color:white;
}
// min-width 以行動瀏覽為主的網頁通常會用 min-width 開始寫
// 當解析度大於376px
@media(min-width:376px){
body{
background: yellow;
color:black;
}
}
// 當解析度大於769px
@media(min-width:769px){
body{
background: green;
color:yellow;
}
|
簡單範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| //HTML
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<body>
<h1>請縮放螢幕使網頁內容產生變化</h1>
<p>test</p>
</body>
//CSS
body{
background: green;
color:yellow;
}
@media (max-width: 768px) {
body{
background: yellow;
color:black;
}
}
@media(max-width: 375px){
body{
background: blue;
color:white;
}
}
|
寫 RWD 時注意的事
子元素寬度設定盡量使用 % ，避免縮放網頁時產生出 X 軸。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| // 限定網頁最大寬度，避免產生 X 軸
.wrap {
max-width: 1024px;
margin: 0 auto;
}
// 子元素寬度單位用 %
.box1{
width: 100%;
height: 200px;
background: green;
}
.box2{
width: 35%;
height: 100px;
background: pink;
float:left;
}
|
瀏覽器尺寸範例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| @media screen and (min-width:1024px){
/*STYLES*/
}
@media screen and (min-width: 1200px) {
// 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}
@media screen and (min-width: 768px) and (max-width: 979px) {
// 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。
}
@media screen and (max-width: 767px) {
// 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。
}
@media screen and (max-device-width: 480px) {
// 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。
}
瀏覽器直立或橫放
@media screen and (orientation:portrait){
// 直立時套用
}
@media screen and (orientation:landscape){
// 橫放時套用
}
retina 顯示器
我們可以透過 min-resolution: 192dpi 和 -webkit-min-device-pixel-ratio: 2 來定義 retina 顯示器：
// 120dpi - 720px,
// 192dpi - 1200px
@media screen and
(min-resolution: 192dpi),
(-webkit-min-device-pixel-ratio: 2) {
/* ... */
}
@media screen and
(min-resolution: 120dpi) and
(min-width: 720px) {
// ...
}
|
參考：
[CSS] Media Query
響應式網頁(RWD)環境與 Media Query
使用 Bootstrap 建立一個 RWD Template（Twitter Bootstrap in Responsive Web Design）
