成人丝袜激情一区二区,中国农村熟妇性视频,欧美一级日韩一级亚洲一级va

一、這是篇經(jīng)驗(yàn)分享

就算不是果粉也應(yīng)該知道，iPad2與new iPad的重大區(qū)別之一就是顯示屏的分辨率。new iPad顯示屏被稱之為“視網(wǎng)膜顯示屏”，其設(shè)備分辨比（之前有詳細(xì)介紹，點(diǎn)擊這里查看）是iPad2的兩倍。 – iPad mini也是普通分辨比。

iPad2與new iPad同時(shí)顯示一個(gè)頁面，寬度都是1024像素的，那差別在什么地方呢？——就在于new iPad每個(gè)像素點(diǎn)實(shí)際上有4倍的普通像素點(diǎn)，如下示意(? smashingmagazine)：

我們使用CSS設(shè)置的像素值(px)屬于普通像素點(diǎn)，或者稱之為標(biāo)準(zhǔn)像素點(diǎn)。

因此，一張200×200尺寸的圖片，我們?cè)O(shè)置如下CSS:

      img {
    width: 200px;
    height: 200px;
}

在iPad2或Mini iPad中就是很正常顯示的圖片；但是，在New iPad中，1個(gè)CSS像素點(diǎn)實(shí)際上有4個(gè)位圖像素點(diǎn)，1個(gè)分成4個(gè)，顯然不夠分啊，只能顏色 近似選取 ，于是，圖片感覺就是模糊的(? smashingmagazine)！

因此，要想讓視網(wǎng)膜屏幕下的圖片高清晰顯示，我們需要的圖片的原始大小不能是200×200像素，而需要2倍高寬，即400×400像素，CSS像素限制依然是：

      img {
    width: 200px;
    height: 200px;
}

此時(shí)，視網(wǎng)膜屏幕下圖片就顯示OK了（非視網(wǎng)膜屏幕圖片被壓縮-減少像素取樣——資源浪費(fèi)！）(? smashingmagazine)：

因此，這種不同iPad上不同的像素分辨比是兼容處理的大頭！

近期折騰的一個(gè)pad相關(guān)項(xiàng)目基本上進(jìn)入尾聲，產(chǎn)品嘛就那樣，跟點(diǎn)評(píng)的比差距很大，差距不在于技術(shù)實(shí)現(xiàn)……畢竟不是優(yōu)秀方驅(qū)動(dòng)的……（沒忍住還是吐槽下吧~）比方說，建鐵路，線路急急忙忙規(guī)劃好，結(jié)果造路的時(shí)候發(fā)現(xiàn)花崗巖地質(zhì)，此時(shí)最大權(quán)衡的方法是修改設(shè)計(jì)路線，結(jié)果是一聲口號(hào)：工人們，我對(duì)你們的技術(shù)信得過，大家不畏艱難險(xiǎn)阻，一起上吧……結(jié)果大家都懂的—— 通過技術(shù)彌補(bǔ)設(shè)計(jì)缺陷是很傻逼的！

鏡花水月，飄渺浮云，很多事情不是一人能左右的。還是做點(diǎn)實(shí)在的事情：釣釣魚，分享些技術(shù)心得，可能價(jià)值更大些，哈哈！

二、關(guān)于設(shè)計(jì)圖

設(shè)計(jì)圖一定要是針對(duì)高清設(shè)計(jì)的，即寬度為2048像素。為什么呢？歷史是向前的，向下兼容才是王道與趨勢(shì)。

在定元素的CSS像素尺寸的時(shí)候，設(shè)計(jì)圖size除以2就是準(zhǔn)確值。例如，設(shè)計(jì)圖上這個(gè)：

三、CSS圖形生成

顯然，一些圓角，以及漸變之類，使用CSS3實(shí)現(xiàn)，這樣，無論是高清屏還是普通屏，都顯示很贊，尤其在New iPad上，顯示效果真的很贊的！

例如上面的那個(gè)券字圖標(biāo)，里面的文字就是文字，后面的漸變以及圓角都是CSS實(shí)現(xiàn)，代碼如下：

      .priv_icon_coupon {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 0.1em;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#EF137A), to(#9C117A));
    font: bold 50px/64px "微軟雅黑";
    color: #fff;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,.5);
}

      <span class="priv_icon_coupon">券</span>

如下Chrome瀏覽器下的效果，New iPad顯示效果很細(xì)膩（恕我弄不到截圖，我就想啊，總不能用我的諾基亞手機(jī)拍下來展示吧~~）

或者下面的圖形效果等等（Chrome瀏覽器下截圖），都可以使用CSS實(shí)現(xiàn)——無需擔(dān)心IE之類的兼容問題！

四、自定義圖標(biāo)字體(Icon Fonts)

并不是所有的圖形都可以使用CSS生成的，例如很多的純色小圖標(biāo)。此時(shí)，我們可以借助另一項(xiàng)技術(shù)：自定義圖標(biāo)字體！

我是利用IcoMoon的免費(fèi)開源圖標(biāo)字體進(jìn)行制作的，根據(jù)設(shè)計(jì)圖選擇合適的小圖標(biāo)們，生成自定義字體，之前有詳細(xì)介紹，點(diǎn)擊這里查看詳情！

有人曾像我抱怨，該網(wǎng)站更新太快，不能用。其實(shí)完全不用擔(dān)心，首先，在同一現(xiàn)代瀏覽器上，您選擇的字體其會(huì)本地存儲(chǔ)下來，下次打開的時(shí)候會(huì)自動(dòng)顯示您之前的選擇；再者，就算本地信息被remove掉，您也可以通過導(dǎo)入之前生成的SVG字體文件進(jìn)行新的編輯與生成！

下圖為我在項(xiàng)目中使用到的所有圖標(biāo)字體：

相關(guān)CSS如下：

      /* custom fonts */
@font-face {
    font-family: ico;
    src: url(/b/pad/font/icomoon.eot);
    src: url(/b/pad/font/icomoon.eot?#iefix) format('embedded-opentype'),
        url(/b/pad/font/icomoon.woff) format('woff'),
        url(/b/pad/font/icomoon.ttf) format('truetype'),
        url(/b/pad/font/icomoon.svg#icomoon) format('svg');
}

當(dāng)然，傳統(tǒng)web開發(fā)的 @font-face 相關(guān)代碼與上面還是有差異的（這里無需關(guān)心低版本IE瀏覽器），具體可以查看我之前的“ CSS3 @font-face實(shí)現(xiàn)顏色大小可控的三角效果 ”一文。

使用自定義字體圖形的好處就是，無論你屏幕的像素比多高，我的圖形都是細(xì)膩的平滑的，越高像素比效果越好！因此，iPad2與iPad3之間屏幕分辨率差異問題就無需擔(dān)心！

例如，在Chrome瀏覽器下，我用鼠標(biāo)把頁面比例搞得蠻大的，效果也是平滑的：

五、使用SVG背景

本項(xiàng)目中，我并沒有使用過SVG背景，不過之前的手機(jī)項(xiàng)目到時(shí)使用過，與之類似的，可以解決高清iPhone與普通iPhone的兼容性問題，具體可查看前文“ SVG特征、支持以及一些實(shí)際使用問題 ”。

其中，舉例了實(shí)現(xiàn)下圖的波波效果：

該SVG文件可以點(diǎn)擊這里查看： circle.svg

該SVG文件是自己繪制的，如果您也想自己繪制創(chuàng)建SVG文件，可以參見這里。

六、background-size下的向下兼容

有些小圖標(biāo)，設(shè)計(jì)師把它弄成漸變的，帶邊框的，不規(guī)則的，這時(shí)候，自定義字體搞不定（文字漸變僅部分支持），SVG也搞不定（自己畫圖功力有限， 55555555），不得已，還是使用傳統(tǒng)的圖片。

這時(shí)候，偶的策略是這樣子的，高清圖片上原始大小摳出這些小圖標(biāo)，使用background-size進(jìn)行尺寸限制，優(yōu)先高清設(shè)備；因?yàn)槎紝儆谛D標(biāo)，所浪費(fèi)的尺寸大小有限，權(quán)衡來看，是最佳策略。

例如下面這個(gè)設(shè)計(jì)效果：

弄出來的圖片信息如下：

可見，高度僅為設(shè)計(jì)圖上的原始高度。在實(shí)際CSS處理的時(shí)候，尺寸1/2限制，代碼如下：

      star, .star_in {
    background: url(star.png) repeat-x;
    background-size: 14px 30px; /* 原始大小28x60 */
}
...

于是，最終，高清new iPad下高清顯示，效果杠杠的；普通pad上圖片1/2壓縮，效果也還好，也算清楚！

當(dāng)然，如果你精力夠多，追求完美，也可以使用CSS進(jìn)行精確控制，例如：

      @media only screen and (-Webkit-min-device-pixel-ratio: 1.5) {
    /* 當(dāng)設(shè)備像素比不小于1.5的時(shí)候... */
}

七、最難處理的普通的img圖片們

展示性的圖片是最難處理的。

例如，一個(gè)餐廳圖片，CSS限制的像素寬度是480×320, 如果我們直接顯示480*320像素的圖片，則在高清設(shè)備下，圖片相當(dāng)于2倍拉伸的效果 – 模糊！如果限制高清的960*640圖片，Oh, my gaga! 這增加的圖片尺寸大小估計(jì)有4倍之多，也就是說，普通iPad上，3/4的圖片流量是多余的，浪費(fèi)的，關(guān)鍵顯示的效果還不如480*320像素的好！如何權(quán)衡，如何博弈！？

理論上講，最佳的做法是，不同的屏幕設(shè)備顯示不同的大小圖片。具體做法如下：

準(zhǔn)備幾套套圖片，大小高寬正好2倍或1.5倍差異（只是iPad開發(fā)的話，只要兩套），圖片的路徑要可以彰顯其比例大小。例如：
```
            /1/a.jpg
/1.5/a.jpg
/2/a.jpg
          
```
通過設(shè)備像素比devicePixelRatio來決定到底使用哪張圖片。例如，高清iPad下， window.devicePixelRatio 為 2 , 因此，我們的圖片HTML應(yīng)該是：
```
          <img src="/2/a.jpg" />
        
```
?

可以通過url或ajax請(qǐng)求形式將


          devicePixelRatio

大小通知后臺(tái)，以實(shí)現(xiàn)HTML的完美輸出；或者圖片具體顯示哪個(gè)URL使用JavaScript進(jìn)行控制，如：

          <img src="占位.jpg" data-url="/1/a.jpg" data-url2="/2/a.jpg" width="240" height="180" />

          var eleImg = $("img"), ratio = window.devicePixelRatio;
eleImg.attr("src", eleImg.attr(ratio  > 1.5? "data-url2": ""data-url"));

但是，上面的做法只是理論的做法。實(shí)際上，如果完全按照上面的實(shí)踐，會(huì)遇到很多阻礙——資源、配合、實(shí)施以及最終效果等！說白了，就是非常的折騰，工作量大；最后說不定還吃力不討好——老板拿著個(gè)高清iPad在咆哮：怎么這個(gè)瀑布流頁面的圖片加載這么慢啊！！

還是那句話， 一切在于權(quán)衡！

大眾點(diǎn)評(píng)iPad高清版，餐廳詳情頁面的特色菜圖片都是模糊的（圖在我眼中，弄不下來~）；可以看到，大眾點(diǎn)評(píng)可能選擇了速度，而不是圖片的顯示質(zhì)量（因?yàn)檫@里的特色菜圖片可能上百之多——雖然使用了動(dòng)態(tài)加載）！

但是，對(duì)于某些特殊圖片，到時(shí)可以做一些兼容處理。

例如，餐廳位置的Google靜態(tài)圖片（截圖有縮放）：

如果不考慮new iPad等視網(wǎng)膜屏幕設(shè)備，直接下面的Code就可以搞定了：

      <img src="http://maps.google.com/maps/api/staticmap?center=31.230393,121.473704&zoom=12&size=300x210&sensor=false" height="210" width="300" />

如下效果（非截圖）：

但是，上面這個(gè)圖在最新的iMac上或者new iPad上就是模糊的，跟旁邊細(xì)膩的文字，圖標(biāo)混在一起，顯得十分的不和諧；我們有必要進(jìn)行特殊處理。

很簡(jiǎn)單，new iPad上圖片兩倍大小就可以了，因此，上面的 size=300x210 我們改成 size=600x420 ，然后，把縮放比例 zoom=12 再提高一點(diǎn)就可以了，比如說 zoom=16 .

因此，new iPad下HTML代碼為：

      <img src="http://maps.google.com/maps/api/staticmap?center=31.230393,121.473704&zoom=16&size=600x420&sensor=false" height="210" width="300" />

如下效果（非截圖）：

至于如何讓不同屏幕顯示不同圖片，那就是你的事情了，方法多多，情況不同使用方法不一樣。

例如，我這里餐廳的信息（包括靜態(tài)地圖位置）都是Ajax load HTML載入的，因此，我只需要在Ajax請(qǐng)求的時(shí)候，將iPad的設(shè)備像素比devicePixelRatio值發(fā)給后臺(tái)，其他的事情，就交給后臺(tái)他們?nèi)ヅ袛唷⑷ポ敵隽耍?

我對(duì)靜態(tài)地圖研究不是很深，這里可能有處理不當(dāng)?shù)牡胤剑瑲g迎同行指正，不甚感謝！

八、哦，莫非這是結(jié)語

本文的內(nèi)容其實(shí) 不只受用于iPad的頁面制作 ，還有手機(jī)。隨著視網(wǎng)膜桌面顯示器越發(fā)的普及（如2012款iMac采用了”視網(wǎng)膜”屏幕，以后，其他一些顯示器們也會(huì)跟風(fēng)，做噱頭的~~），我們傳統(tǒng)web的頁面開發(fā)也將面對(duì)新的挑戰(zhàn)——不僅要處理不同的顯示屏分辨率，還要處理不同的設(shè)備像素比！

看來蘋果公司想顛覆的東西波及甚廣，爾等估計(jì)也不能幸免了。

發(fā)展很快，止步不前，容易淘汰；機(jī)遇與挑戰(zhàn)共存，加油吧，阿郎！

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

視網(wǎng)膜New iPad與普通分辨率iPad頁面的兼容處理