下面的語法，是最常用到的 Media Queries：（下方為同一檔案之內容）
//全部的使用者都會載入這裡的 CSS。
@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 Queries 中，我們最常使用 min-width 和 max-width 來判斷使用者的視窗寬度，而 max-device-width 則是使用者「裝置」的最大寬度。width 和 device-width 差在哪裡？
- width : 因為瀏覽器可以自由調整寬度，所以這邊指的是該瀏覽視窗的寬度。
- device-width : 就算你把瀏覽器視窗弄到符合最大(小)寬度，還是不會生效。因為，device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。所以，device-width 常用在判斷手機上。
所以，你也可以自己加上其他的條件下去。要注意的是，每一個條件之間請用 and 來分隔，並要適時加上括號以免錯誤。 min-width 是最小寬度；max-width 是最大寬度，可以用來表示一定的範圍。
寫在 HTML 裡頭的判斷
上一節的語法，你也可以把它個別拆成好幾個檔案，然後用 HTML 的 來載入並且判斷。下面為 HTML 代碼：
<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)">
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">
我們就可以用 link 中的 media 屬性來判斷使用者的視窗 / 裝置寬度，如上。之後，在每一個 css 檔案中你就可以寫若使用者寬度符合條件的 CSS 。如 a.css 中，就是要寫如果使用者之視窗寬度 <= 768px，要再載入的 CSS。
注意事項
在 Media Queries 中的 CSS，其效果是覆蓋原本預設的 CSS。所以，你要先有一份完整的 CSS，再使用 Medai Queries，對細部元素做調整。所以，絕對不是把全部的 CSS 複製一遍到 Media Queries 中再修改喔！
Viewport
如果網頁沒有做 Responsive Web Design 的話，手機的瀏覽器會自動假裝解析度變很大，會讓網頁完整顯示。但是，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。而這個 meta 標籤是為了防止這樣的情形發生 ( iphone 據說會有此情形)，讓網頁顯示的寬度就直接是裝置的寬度，不會把網頁硬塞。這段只要加在 HTML 的 裡頭即可。
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
沒有留言:
張貼留言