Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
  先前曾分享過「Retina.js」這外掛,來解決Retina高解析螢幕在瀏覽網頁時,圖片自動切換成高解析,讓圖片看起來是細緻,而不會因此感到模糊或鋸齒,由於Retina螢幕的Device Pixel Ratio大於1,意思就是說在Retina的螢幕中所顯示的每個像素,與對應到的實際像素是超過1倍以上,因此除了透過「Retina.js」來作設定外,也可透過CSS3的media屬性。
  而各位最常使用到media這屬性,則是用來設定RWD的網頁,透過media來設定螢幕的大小,進而變換版型的顯示大小,而media除了可設定螢幕的大小外,也可用來設定螢幕的解析,透過螢幕解析來切換高解析度的圖片,至於要如何使用,現在也一塊來看看!
Media Query基本語法
/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* 當DPR 1.25以上,與 min-resolution裝置解析在120dpi就套用此樣式 */

}
/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* 當DPR 1.5以上,與 min-resolution裝置解析在144dpi就套用此樣式 */
}

/* 2.0 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2.0), 
(min-resolution: 192dpi){ 
   /* 當DPR 2.0以上,與 min-resolution裝置解析在192dpi就套用此樣式 */
}

有了這基本的概念後,接下來就透過media來設定螢幕的解析與實際的顯示像素。
#css設定
/*非Retina螢幕顯示此段樣式*/
.image {
	width: 500px;
	height: 500px;
	background-size: 500px 500px;
	background-repeat: no-repeat;
	background-image: url(intro_large.jpg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
	.image{
		background-image: url(intro_large_2x.jpg); /*_2x的實際圖片尺寸為1000px×1000px*/
	}
}

#html
<div class="image"></div>

完成後,當螢幕非Retina時,圖片就會變成1x來顯示,就是500px×500px。
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
當是Retina的或高解析的螢幕時,CSS就會自動切到media中的設定,圖片自動切換成1000px×1000px高解析來呈現,這時就可保有清晰的影像。
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
[範例預覽]

延伸文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像


相關文章

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    Dan_ 說道:

    梅干你好:想請問若想要作出跟Apple System Status 頁面一樣的功能,
    可以自動去偵測伺服器或網站的服務狀態並顯示(例如正常、緩慢、異常),
    是要使用什麼方法實作或是要以什麼關鍵字搜尋呢?
    因為找了數多天仍然找不到太多相關的文章
    故來此尋求協助,如果方便希望能給點提示,感謝!

    回應:
    請問這畫面是在那邊呈現~

近期講座

近期講座

更多講座