RWD 系列文章 》
圖片在不同尺寸的螢幕上呈現,必須考慮解析度的問題,高解析大尺寸螢幕上顯示的大型圖片,並不適用手機等小尺寸螢幕裝置,要讓網頁上呈現的圖片適合各種尺寸的裝置,比較好的作法是準備數種不同尺寸的圖片,然後根據螢幕寬度進行呈現。
假設有一張大尺寸圖片 IMGP0403.jpg,其大小為 2048✕1536,為了在各種尺寸的螢幕上以合適的尺寸呈現,我們準備了數種不同大小的圖片,並且命名如下:
接下來在網頁中配置一個 img 標籤,並透過 JavaScript 根據螢幕寬度指定所要套用的圖片。撰寫以下的程式碼:
其中首先取得目前的螢幕寬度,接下來根據 width 設定所要使用的圖片檔案 imgpath,最後將結合路徑字串,設定給畫面上 img 元素之 src 屬性。以下是在寬度為 1680 的螢幕上呈現的畫面:
圖片上標示的數字為此圖片的尺寸,而於螢幕寬度超過了 1600 ,因此套用 IMGP0403_1200.jpg 這張圖片,以下為筆者手機4吋螢幕所顯示的畫面:
透過 window.innerWidth 屬性的判斷是很粗造的作法,但是在一般的瀏覽器或是Android手機上幾乎都可以作正確的判斷。
RWD 系列文章 》
圖片在不同尺寸的螢幕上呈現,必須考慮解析度的問題,高解析大尺寸螢幕上顯示的大型圖片,並不適用手機等小尺寸螢幕裝置,要讓網頁上呈現的圖片適合各種尺寸的裝置,比較好的作法是準備數種不同尺寸的圖片,然後根據螢幕寬度進行呈現。
假設有一張大尺寸圖片 IMGP0403.jpg,其大小為 2048✕1536,為了在各種尺寸的螢幕上以合適的尺寸呈現,我們準備了數種不同大小的圖片,並且命名如下:
圖片檔案
|
寬✕高
|
(原圖)IMGP0403.jpg
|
2048✕1536
|
IMGP0403_1200.jpg
|
1200✕900
|
IMGP0403_1000.jpg
|
1000✕750
|
IMGP0403_800.jpg
|
800✕600
|
IMGP0403_600.jpg
|
600✕450
|
IMGP0403_400.jpg
|
400✕300
|
接下來在網頁中配置一個 img 標籤,並透過 JavaScript 根據螢幕寬度指定所要套用的圖片。撰寫以下的程式碼:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body style="margin:0;padding:0;">
<img id="viewt" />
<script>
var width = window.innerWidth; //取得目前螢幕寬度
//根據寬度指定所要呈現的圖片
var imgpath =
width > 1600 ? "IMGP0403_1200.jpg" :
(width > 1000 ? "IMGP0403_1000.jpg" :
(width > 800 ? "IMGP0403_800.jpg" :
width > 600 ? "IMGP0403_600.jpg" : "IMGP0403_400.jpg"));
document.getElementById('viewt').src = 'images/view/' + imgpath;
</script>
</body>
</html>
其中首先取得目前的螢幕寬度,接下來根據 width 設定所要使用的圖片檔案 imgpath,最後將結合路徑字串,設定給畫面上 img 元素之 src 屬性。以下是在寬度為 1680 的螢幕上呈現的畫面:
圖片上標示的數字為此圖片的尺寸,而於螢幕寬度超過了 1600 ,因此套用 IMGP0403_1200.jpg 這張圖片,以下為筆者手機4吋螢幕所顯示的畫面:
透過 window.innerWidth 屬性的判斷是很粗造的作法,但是在一般的瀏覽器或是Android手機上幾乎都可以作正確的判斷。
RWD 系列文章 》
沒有留言:
張貼留言