最近努力上 Hahow 學校企業版學習, 這周聚焦在響應式網頁設計, 例如 Bootstrap 與 CSS, 雖然 Bootstrap 很好用, 但要會用得巧還是得要有堅強的 CSS 底子才行.
圖片如果不設定 width 屬性, 則當瀏覽器寬度縮小時會出現 X 軸拉桿, 這在小型裝置上會造成使用經驗不佳問題. 今天學到這可以將 width 與 max-width 屬性設為百分比值來解決, 但兩者有如下差異 :
- width :
設為 100% 時圖片會一直佔滿父元素 (例如 body) 空間, 瀏覽器放大時也跟著滿版放大, 超過圖片寬度解析度時會糊掉. - max-width :
設為 100% 時圖片不會一直佔滿父元素 (例如 body) 空間, 瀏覽器放大到 超過圖片寬度時不會持續放大, 當超過圖片寬度時會固定在其原本寬度, 因此不會有糊掉現象.
因此除非有特別用途, 建議使用 max-width. 測試如下, 圖片來自 Pixabay (解析度 640x427) :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>圖片</title>
<style>
.pic {
width: 100%;
}
</style>
</head>
<body>
<img class="pic" src="images/landscape.jpg">
</body>
</html>
此例使用 width: 100% 屬性設定圖片寬度, 當瀏覽器縮小時圖片也會隨之縮小, 橫軸不會出現滑桿, 但它會一直滿版佔據整個視窗寬度, 當瀏覽器放大到超過圖片寬度 (640px) 時就會開始出現糊掉現象 :
測試網址 :
其次是使用 max-width: 100% 的效果 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>圖片</title>
<style>
.pic {
max-width: 100%;
}
</style>
</head>
<body>
<img class="pic" src="images/landscape.jpg">
</body>
</html>
當瀏覽器縮小時圖片一樣是跟著縮小不會出現滑桿, 當瀏覽器放大超過圖片寬度 640px 時圖片就固定在那寬度不會再放大, 因此不會有糊掉現象 :
沒有留言:
張貼留言