“Retina”是一種顯示技術标準，它通(tōng)過将更多(duō)的(de)像素點密集地排列在一塊屏幕内，從而實現了(le)更高(gāo)的(de)分(fēn)辨率和(hé)更爲細膩的(de)顯示效果。這(zhè)一技術最初由摩托羅拉公司研發，并首先應用(yòng)于其Moto Aura産品上。這(zhè)種高(gāo)分(fēn)辨率的(de)屏幕在正常的(de)觀看距離下(xià)，使得(de)人(rén)眼幾乎無法區(qū)分(fēn)單個(gè)像素，因此也(yě)被稱爲視網膜顯示屏。

随著(zhe)2012年蘋果發布了(le)配備Retina屏幕的(de)Macbook Pro，Retina屏幕在電腦(nǎo)領域的(de)應用(yòng)逐漸廣泛。Retina屏幕的(de)核心優勢在于其屏幕密度是傳統屏幕的(de)兩倍，從而帶來(lái)了(le)更高(gāo)的(de)清晰度。由于其分(fēn)辨率高(gāo)到足以滿足人(rén)眼視網膜的(de)最高(gāo)識别度，因此也(yě)被稱爲視網膜屏幕。在這(zhè)樣的(de)屏幕下(xià)，我們過去設計的(de)安全距離大(dà)約爲1000像素的(de)網站顯得(de)相當粗糙。

如何在Retina屏幕下(xià)顯示更精細的(de)内容呢(ne)？以400X300像素的(de)區(qū)域爲例，實際上我們需要爲前端提供一張800X600像素的(de)切圖，因爲Retina屏幕的(de)一個(gè)點實際上對(duì)應著(zhe)兩個(gè)像素。然而，考慮到我們的(de)用(yòng)戶群體中，使用(yòng)Retina屏幕的(de)用(yòng)戶占比較大(dà)，特别是像設計師這(zhè)樣的(de)專業群體，我們如何同時(shí)兼顧高(gāo)清屏幕和(hé)普通(tōng)屏幕的(de)顯示需求呢(ne)？

我們需要在設計時(shí)以Retina屏幕的(de)大(dà)小爲标準，通(tōng)常建議(yì)是傳統設計稿的(de)兩倍大(dà)小。然後需要準備兩套切圖：一套用(yòng)于普通(tōng)屏幕，另一套用(yòng)于Retina屏幕。對(duì)于普通(tōng)屏幕的(de)切圖，我們可(kě)以按照(zhào)常規命名方式，如logo.jpg；而對(duì)于Retina屏幕的(de)切圖，我們需要在文件名後添加@2x标識，如logo@2x.jpg。前端工程師可(kě)以使用(yòng)代碼來(lái)識别用(yòng)戶的(de)屏幕類型，如果屏幕是Retina屏，則加載雙倍尺寸的(de)切圖，否則加載普通(tōng)尺寸的(de)切圖。爲了(le)方便前端工程師進行屏幕識别，可(kě)以使用(yòng)像Retina.js這(zhè)樣的(de)工具來(lái)實現。