[CSS] 滿版圖片響應式網頁RWD
目錄
〈1〉作法 1. 製作兩張圖片尺寸。桌機 = 寬1600 x 高900； 手機 = 寬1080 x 高1920
2. 預設隱藏手機圖片尺寸
3. 當判別使用者視窗寬度 <= 768px，顯示手機圖片尺寸，隱藏桌機圖片尺寸
〈2〉語法 1. 要設定原比例縮放的 img 很容易，只需要 width 、 height 兩個屬性，其中一個數值（通常是 width ）設定百分比來作為縮放依據，另一個數值（通常是 height ）設定為 auto 即可
2. 使用 max-width 替代 width 可以更完美的處理當瀏覽器視窗小於元素寬度的情況，這點在行動裝置上顯得更為重要
3. @media 媒體查詢可讓我們建立回應式的體驗，也就是針對各種大小的螢幕套用特定的樣式
〈3〉Sample code ☞ 腳本之家 | html圖片自適應手機屏幕大小的css寫法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <title>Page Title</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <img src="images/first.jpg" alt="" /> <img class="smallscreen" src="images/first-small.jpg" alt="" /> </body> </html>
style.css
body {
margin : 0;
padding : 0;
font-family: \5FAE\8EDF\6B63\9ED1\9AD4, Arial, sans-serif;
}
img {
max-width: 100%;
width : 100%;
height : auto;
}
img.smallscreen {
display: none;
}
/* 如果使用者視窗寬度 <= 768px */
@media screen and (max-width: 768px) {
img {
display: none;
}
img.smallscreen {
display: block;
}
}
Source
☞ Firefox謀智台客 | 九個適應性設計小撇步，把你的網站打造成變形金剛！（上篇）☞ 3Q.9527.TW | Android、iPhone、iPad手機平板螢幕桌布尺寸解析度列表
☞ Google Developers | 使用 CSS 媒體查詢提升回應成效
☞ 3Q.9527.TW | Android、iPhone、iPad手機平板螢幕桌布尺寸解析度列表
☞ iBest | 響應式網頁原理
☞ YAHOO奇摩3C科技 | [iOS轉Android] 給你滿版的手機桌布
沒有留言: