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 系列文章 》
沒有留言:
張貼留言