HTML5和CSS3：讓您的網站準備高分辨率顯示器

當蘋果公司推出了一種新的高分辨率顯示–所謂的視網膜顯示–的iPhone，iPad和MacBook，幾年前，他們迎來了一個新時代的顯示質量。這樣的屏幕上，人眼無法分辨單個像素點了。
高分辨率的顯示器是常態而不是例外，今天，你會發現越來越多的中距離高分辨率的移動設備。許多應用程序已經高清晰度兼容，現在你還可以創建高分辨率的網站使用HTML5，CSS3和JavaScript–，無需額外的JavaScript庫。

雙銳利由于雙像素密度
移動設備上使用320像素的默認寬度，如此多的手機網站的設計寬度。高分辨率的顯示器，但是，有雙像素或更。為了防止網站出現一半大小的顯示器上的雙密度，這將擴大規模。這部作品的字體和矢量圖形就好了。基于位圖的格式如JPEG和PNG文件，然而，模糊和失真成為。

因為這種顯示器越來越普及，提供高質量的Web項目是Web設計人員和開發人員的一個重要因素。

HTML5，srcset屬性
人們已經掙扎了很長一段時間在HTML5提供高分辨率的顯示圖像。的srcset屬性已成為首選的方法。它允許你定義不同的像素密度多文件來源。像素密度分別定義以下參考圖像的一個空間，例如，”2“雙像素密度。

與LT；IMG的srcset=“image.jpg，image@2x.jpg 2X”SRC=“JPG圖像。”寬度=“320”高度=“160”ALT=“” / >；
在上面的例子中，兩個文件被定義通過srcset。第一個是用于標準的像素密度的設備。對于標準的像素密度可以把價值”1x“。這是一個雙像素密度的顯示文件。的SRC屬性應作為一個年長的瀏覽器后退。同時，參考“正常”的形象在這里。

在高分辨率顯示兩個圖像對比：雙像素密度（上）和標準的像素密度（下）
您還可以添加一個圖像的物理寬度和高度適當的文件源內srcset屬性而不是定義像素密度。

與LT；IMG的srcset=“image-320w.jpg 320W，image-640w.jpg響應”SRC=“image-640w JPG。”ALT=“” / >；
如果你選擇去選擇后者，圖像將被縮小到瀏覽器的窗口的寬度–如果你不使用高度或寬度屬性。瀏覽器中選擇該設備的適當的文件。如果您的設備有一個高達320像素的屏幕寬度，瀏覽器將使用的文件image-320w.jpg。如果分辨率超過320像素，它將使用的文件image-640w.jpg。

通過使用尺寸屬性，您可以調整圖像顯示的寬度。你將需要指定媒體信息隨著優先圖像寬度。

與LT；IMG的srcset=“image-320w.jpg 320W，image-640w.jpg響應”尺寸=“（最小寬度：320px）50vw，（最大寬度：320px）100vw”SRC=“bild-640w JPG。”ALT=“” / >；
在上面的例子中，圖像將被縮小到50%的視口的寬度（50vw）為至少320像素視口的寬度（最小寬度：320）。如果它小于320像素，圖像將占據整個視口的寬度（100vw）。

html5-css3-pixeldichte-sizes
不同寬度：在景觀模式在肖像模式和50%視圖100%
你可以只定義像素密度（例如，2）或寬度和高度（例如，320W 160h）內srcset文件參考。把它們結合起來，這是不可能的。

的srcset屬性也有了新的作品<圖片>以及與之相關的<源>元素的<圖片>元素允許你定義不同的顯示窗口大小的圖像。你也可以定義為不同的像素密度的來源。

與LT；圖片與GT；
  與LT；源的srcset=“image-640w.jpg，image-640w@2x.jpg 2X”媒體=“（最小寬度：320px）” / >；
  與LT；源的srcset=“image-320w.jpg，image-320w@2x.jpg 2X”媒體=“（最大寬度：320px）” / >；
  與LT；IMG SRC=“image-640w JPG。”寬度=“320”高度=“160”ALT=“” / >；
與LT；/圖片與GT；
在上面的例子中，四文件的來源是通過兩個<源>元素文件image-320w.jpg和image-320w@2x.jpg將用于顯示窗口的寬度小于320像素（取決于像素密度）。文件image-640w.jpg和image-640w@2x.jpg將被用于超過320像素的寬度。記住，<源>元不知道寬度和高度屬性。如果你想定義尺寸，你需要使用CSS。

別忘了提供IMG > <后備老的瀏覽器。

的srcset和尺寸屬性，以及<圖片>元，由Chrome 38 +和Firefox 38支持+。Internet Explorer目前不支持的屬性和元素。Android的Chrome版本40和iOS 8.1版本的Safari瀏覽器。Safari，然而，支持尺寸只有部分。

如果你想使用srcset不支持的瀏覽器的屬性，你可以得到一個polyfill，模仿舊的瀏覽器的功能。

CSS3和image- set()
您還可以定義使用CSS3不同像素密度不同的圖像來源。這是可以做到的image- set()。類似于HTML5的屬性srcset，你可以引用多個文件通過url()。image- set()可用于圖像源是指通過url()。

身體{背景—圖片：URL（“汞。JPG”）；背景—圖片：圖片—配置（URL（“汞。JPG”）1x，URL（“hg@2x.jpg”）2）；
}
在上面的例子中，兩個像素密度是指通過背景圖像image- set()。目前，你應該與合適的供應商前綴標記符號，例如，- webkit-image- set()。再次，它可能會撤退是一個好主意。這是很重要的回退image- set()。瀏覽器不知道image- set()將忽略第二背景圖像財產所有其他瀏覽器將執行第二個屬性和覆蓋第一個。

html5-css3-pixeldichte-hg
高分辨率的背景（上）和“正常”的分辨率的背景（下）
的image- set()符號是目前支持iOS的Safari Chrome 31 +，7.1 +，和Android的Chrome 40 +。Firefox和IE瀏覽器不支持它。

除了image- set()符號，它支持不同的像素密度的圖像，也有媒體查詢最小分辨率和最大分辨率考慮不同的像素密度，任何CSS屬性。

@媒體屏幕（min—分辨率：2dppx） {身體{背景：URL（“hg@2x.jpg”）；
  }
}
在上面的例子中，一個背景圖形顯示雙像素密度是指通過最小分辨率。單位DPPX代表每像素點代表的像素密度。但也有其他單位DPI（每英寸點數），它允許你在一個打印分辨率提供圖像，或DPCM（點每厘米）。你應該使用單位DPPX屏幕。

的分辨率特征是由鉻+ 31和Firefox 35 +支持。Internet Explorer支持特征從9版本只有與DPI單元。Android的Chrome支持從40版本和iOS版本7.1–但是Safari，只有舊的符號設備最小像素比例或最大裝置像素比例。

替代方案：僅在高分辨率為位圖
新的HTML5元素和屬性允許你為不同的分辨率和像素密度圖像；然而，你通常會產生一個不同的圖像文件。內容管理系統如網頁自動做這件事，但手工制作的項目，它沒有一個服務器端的編程語言，你需要手動生成文件的變種。

那些想備用的費用也要考慮高像素密度可以采取中間路線，這需要所有的像素密度只有一個文件。創建雙分辨率–最佳品質下降–圖像文件并將其嵌入在HTML文檔中一半的分辨率。對于一個640×320圖像就會像這樣：

與LT；IMG SRC=“image-640w JPG。”寬度=“320”高度=“160”ALT=“” / >；
而高清晰度屏幕顯示完整的物理分辨率，屏幕圖像標準規模下降到一半大小。使用標準的像素密度時，你不會注意到任何質量損失的擴大。雙像素密度仍然提供了一個比你會得到正常分辨率的圖像質量更好。

另一方面，標準分辨率的顯示器會下載一個不必要的大文件。因此，應該只使用高度壓縮的JPEG文件。

html5-css3-pixeldichte-kompression
高度壓縮的JPEG文件的一半的分辨率（上）
圖像也可以合并使用CSS雙分辨率。財產背景大小使您可以縮小圖像的分辨率的一半。

身體{背景—圖片：URL（“汞。JPG”）；背景—大小：32px 16px；
如果例子中的背景圖像的分辨率為64×32像素，它將一半的大小顯示。所以，這是同樣的效果，就像在HTML的例子。

使用SVG和iconfonts
所有新的瀏覽器支持基于SVG格式的矢量。特別是標志，但也有許多其他的圖形元素的矢量圖形和嵌入為GIF或PNG文件在網站。由于SVG格式，也可以顯示在一個網站的矢量圖形，不管你使用HTML通過IMG >

SVG的優勢應該清楚：這是基于矢量的，它將始終顯示在最佳分辨率，此外，它使帶寬和節省時間，因為它不需要提供不同的分辨率和像素密度。

圖標字體的高清晰度顯示SVG的一個很好的選擇。基于矢量字體也因此表現在最佳分辨率。

如果你想對沖你的賭注SVGs，不排除舊的瀏覽器不支持SVG，你可以把后備方案的一些技巧。

使用JavaScript確定像素密度
有時，載入圖片，通過JavaScript，例如，在畫廊。你可以直接裝載正確的圖像源與適當的像素密度而不是生成一個IMG > <元素的所有srcset引用通過JavaScript。

JavaScript知道財產devicepixelratio這表明，像素密度。

如果 （窗口。devicepixelratio 與GT； 1） {文件相對應的（“IMG”）【0]。SRC = “image@2x.jpg”；
}
在上面的例子中，一個圖像文件將如果像素密度高于1載。從邏輯上講，物業只能讀。

有一件事你應該記住，當使用devicepixelratio：價值由該屬性取決于瀏覽器的實際放大因子。如果一個文件是在150%瀏覽器縮放顯示，devicepixelratio提供一個值1.5–標準的像素密度。雙像素密度的顯示值3在相同的縮放因子。

結論與相關鏈接
獲取Web項目準備的高清晰度顯示器可以是一個相當具有挑戰性的任務。然而，高像素密度應始終考慮，特別是在新項目上工作時。所有的解決方案可以很容易地配備了回退，那么你就跑不離開舊的瀏覽器的風險。

• 牧羊人相關推薦：88 89 90
• 網頁設計師如何從WEB設計啟動轉型
• 深圳網頁設計草圖用戶界面工具包
• 創建一個網頁設計Web導航模型
• 設計網站
• 網站設計