久久综合,久久免费精品国产72精品九九 http://wscjj.cn Mon, 26 Sep 2016 01:40:51 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.7.12 http://wscjj.cn/wp-content/uploads/2016/08/cropped-logo-2-32x32.png Retina.js – Mac玩兒法 http://wscjj.cn 32 32 Retina.js：為你的網(wǎng)頁(yè)顯示高清圖片 http://wscjj.cn/retina-js http://wscjj.cn/retina-js#respond Sun, 02 Sep 2012 11:59:49 +0000 http://wscjj.cn/?p=8027 隨著以蘋果Retina Macbook為代表的高清屏電腦產(chǎn)品逐步進(jìn)入市場(chǎng)，越來(lái)越多的網(wǎng)頁(yè)和軟件都針對(duì)高清屏優(yōu)化了界面顯示效果，紛紛提供了分辨率更高的背景圖，Icons及其他UI元素，實(shí)現(xiàn)的方法也是五花八門。

今天玩兒法向各位站長(zhǎng)提供一個(gè)能預(yù)判瀏覽設(shè)備分辨率是否為Retina級(jí)別的腳本：“Retina.js”，有了它開發(fā)者可以在服務(wù)器端上傳兩份UI，一個(gè)是提供給普通設(shè)備的，一個(gè)是提供給Retina設(shè)備的，當(dāng)你使用RMBP 、iDevice瀏覽網(wǎng)頁(yè)時(shí)，Retina.js會(huì)馬上知道，并調(diào)用已準(zhǔn)備好的高清UI。

Retina.js使用方法：

官方提供的安裝包中包括retina.less和retina.js兩個(gè)文件.

  1. 將retina.js和retina.less上傳至服務(wù)器，并嵌入<header>.

  2. 將retina.less里的.at2x（）引入css樣式表，比如你要提供高清Logo，原有寫法為background-image，那么就將它改為.at2x，這樣實(shí)際的輸出效果還是：

#logo { background-image: url(‘/images/my_image.png’); }

但多了以下語(yǔ)句：^_^

@media all and (-webkit-min-device-pixel-ratio: 1.5)

{ #logo { background-image: url(‘/images/my_image@2x.png’); background-size: 200px 100px; } }

關(guān)于LESS語(yǔ)言的更多知識(shí)大家可以去中國(guó)官網(wǎng)了解更多：

www.lesscss.net

]]> 0