media query 使用方法 and RWD (RESPONSIVE WEB DESIGN)
很健忘要來記錄一下
如果在 device 裡面要使用 RWD 效果，切記加上:
<meta name="viewport" content="width=device-width, initial-scale=1">
(備註)類老師曾經修過 console 出現類似像這樣 warm msg↓
The value "device-width;" for key "width" is invalid, and has been ignored. The value "1;" for key "initial-scale" was truncated to its numeric prefix. Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.問題在於 content="width=device-width; initial-scale=1;" 是用分號來表示，建議還是使用逗號較為正確。
Using the viewport meta tag to control layout on mobile browsers
- meta viewport 的屬性(Properties)有哪些:
| Name | description |
|---|---|
| width | 非負數的數值範圍 [1px, 10000px] 或者 device-width(100vw) |
| height | 非負數的數值範圍 [1px, 10000px] 或者 device-width(100vh) |
| initial-scale | 第一次進入頁面的初始比例，非負數的數值範圍 [0.1, 10] |
| minimum-scale | 允許縮小最小比例，非負數的數值範圍 [0.1, 10] |
| maximum-scale | 允許放大最大比例，非負數的數值範圍 [0.1, 10] |
| user-scalable | 允許使用者縮放，1 or 0 (yes or no) |
- media query 的兩種寫法:
- 直接在 .css 檔裡裡寫上 Media Queries @media 的語法
@media screen and (min-width: 480px) { body { background-color: lightgreen; } } @media screen and (min-width: 320px) { body { background-color: green; } } - 利用 HTML 的 CSS link 屬性 media 來載入不同的大小樣式。
<link rel="stylesheet" type="text/css" href="all.css" media="screen"> <link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 480px)"> <link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 320px)">
- 直接在 .css 檔裡裡寫上 Media Queries @media 的語法