首頁技術(shù)文章正文

為什么要使用二倍圖？二倍圖使用教程

更新時間:2021年05月12日11時09分來源:傳智教育瀏覽次數(shù):

當設(shè)備像素比很大時，圖片會被放大，而放大會讓圖片看起來模糊。為此，我們可以使用二倍圖的方式來提高圖片的清晰度。接下來就來講解二倍圖的概念和使用方法。

在實際開發(fā)中，當一個50 ×50像素（CSS像素）的圖片直接放到iPhone 6/7/8設(shè)備中顯示時，圖片會被放大，變成原來的兩倍（iPhone 6/7/8的設(shè)備像素比為2），即100 ×100。為了避免圖片放大后模糊，我們可以預(yù)先制作一張100 ×100的圖片，然后在網(wǎng)頁中手動設(shè)置這個圖片的樣式，將圖片的寬和高都設(shè)為50像素。這樣，這張圖片就會以它原本的像素（100 ×100）來顯示，保證了圖片的原有清晰度。

為了讓讀者更好地理解，下面通過例2-6演示二倍圖的使用方法。

【例2-6】

（1）創(chuàng)建C:\web\chapter02\demo06.html文件，具體代碼如下。

  <!DOCTYPE html>
  <html>
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   <title>二倍圖</title>
   <style>
    img:nth-child(2) {
     width: 50px;
    height: 50px;
   }
  </style>
 </head>
 <body>
  <!-- 原圖 -->
  <img src="images/50.png" alt="">
  <!-- 二倍圖 -->
  <img src="images/100.png" alt="">
 </body>
 </html>

在上述代碼中，第8~11行代碼使用CSS 3子元素選擇題:nth-child獲取到第2張圖片，并手動設(shè)置圖片的寬度和高度為50px；第16行代碼使用img標簽引入50 ×50的圖片；第18行代碼引入100 ×100的圖片。相應(yīng)的圖片素材可以從配套源代碼中獲取。

（2）在瀏覽器中打開demo07.html，觀察iPhone 6/7/8中的顯示效果。為了方便對比兩張圖的區(qū)別，將縮放設(shè)置為150%，運行結(jié)果如圖1所示。