教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

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

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

傳智教育-一樣的教育,不一樣的品質(zhì)

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

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

為了讓讀者更好地理解,下面通過(guò)例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張圖片,并手動(dòng)設(shè)置圖片的寬度和高度為50px;第16行代碼使用img標(biāo)簽引入50 ×50的圖片;第18行代碼引入100 ×100的圖片。相應(yīng)的圖片素材可以從配套源代碼中獲取。

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

圖1 二倍圖

在圖1中,左邊的圖片是原圖,右邊的圖片是二倍圖。由此可見(jiàn),二倍圖在頁(yè)面中顯示的效果更加清晰。

猜你喜歡:

移動(dòng)web端頁(yè)面設(shè)置特殊樣式

prop()方法獲取元素固有屬性【web前端】

Web開(kāi)發(fā)兼顧多個(gè)版本瀏覽器的通用方法?

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!