HTML5和CSS3的網(wǎng)站高分辨率顯示器

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

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

因?yàn)檫@種顯示器越來越普及，提供高質(zhì)量的Web項(xiàng)目是Web設(shè)計(jì)人員和開發(fā)人員的一個(gè)重要因素。

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

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

在高分辨率顯示兩個(gè)圖像對比：雙像素密度（上）和標(biāo)準(zhǔn)的像素密度（下）
您還可以添加一個(gè)圖像的物理寬度和高度適當(dāng)?shù)奈募磧?nèi)srcset屬性而不是定義像素密度。

與LT；IMG的srcset=“image-320w.jpg 320W，image-640w.jpg響應(yīng)”SRC=“image-640w JPG。”ALT=“” / >；
如果你選擇去選擇后者，圖像將被縮小到瀏覽器的窗口的寬度–如果你不使用高度或?qū)挾葘傩?。瀏覽器中選擇該設(shè)備的適當(dāng)?shù)奈募?。如果您的設(shè)備有一個(gè)高達(dá)320像素的屏幕寬度，瀏覽器將使用的文件image-320w.jpg。如果分辨率超過320像素，它將使用的文件image-640w.jpg。

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

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

html5-css3-pixeldichte-sizes
不同寬度：在景觀模式在肖像模式和50%視圖100%
你可以只定義像素密度（例如，2）或?qū)挾群透叨龋ɡ纾?20W 160h）內(nèi)srcset文件參考。把它們結(jié)合起來，這是不可能的。

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

與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；
在上面的例子中，四文件的來源是通過兩個(gè)<源>元素文件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不支持的瀏覽器的屬性，你可以得到一個(gè)polyfill，模仿舊的瀏覽器的功能。

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

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

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”）；
}
}
在上面的例子中，一個(gè)背景圖形顯示雙像素密度是指通過最小分辨率。單位DPPX代表每像素點(diǎn)代表的像素密度。但也有其他單位DPI（每英寸點(diǎn)數(shù)），它允許你在一個(gè)打印分辨率提供圖像，或DPCM（點(diǎn)每厘米）。你應(yīng)該使用單位DPPX屏幕。

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

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

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

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

另一方面，標(biāo)準(zhǔn)分辨率的顯示器會(huì)下載一個(gè)不必要的大文件。因此，應(yīng)該只使用高度壓縮的JPEG文件。

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

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

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

SVG的優(yōu)勢應(yīng)該清楚：這是基于矢量的，它將始終顯示在好分辨率，此外，它使帶寬和節(jié)省時(shí)間，因?yàn)樗恍枰峁┎煌姆直媛屎拖袼孛芏取?/p>

圖標(biāo)字體的高清晰度顯示SVG的一個(gè)很好的選擇?；谑噶孔煮w也因此表現(xiàn)在好分辨率。

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

使用JavaScript確定像素密度
有時(shí)，載入圖片，通過JavaScript，例如，在畫廊。你可以直接裝載正確的圖像源與適當(dāng)?shù)南袼孛芏榷皇巧梢粋€(gè)IMG > <元素的所有srcset引用通過JavaScript。

JavaScript知道財(cái)產(chǎn)devicepixelratio這表明，像素密度。

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

有一件事你應(yīng)該記住，當(dāng)使用devicepixelratio：價(jià)值由該屬性取決于瀏覽器的實(shí)際放大因子。如果一個(gè)文件是在150%瀏覽器縮放顯示，devicepixelratio提供一個(gè)值1.5–標(biāo)準(zhǔn)的像素密度。雙像素密度的顯示值3在相同的縮放因子。

結(jié)論與相關(guān)鏈接
獲取Web項(xiàng)目準(zhǔn)備的高清晰度顯示器可以是一個(gè)相當(dāng)具有挑戰(zhàn)性的任務(wù)。然而，高像素密度應(yīng)始終考慮，特別是在新項(xiàng)目上工作時(shí)。所有的解決方案可以很容易地配備了回退，那么你就跑不離開舊的瀏覽器的風(fēng)險(xiǎn)。

創(chuàng)新互聯(lián)相關(guān)推薦：
• 成都企業(yè)網(wǎng)站建設(shè)出來都有哪些毛病?
• 設(shè)計(jì)網(wǎng)站
• 網(wǎng)站設(shè)計(jì)

新聞名稱：HTML5和CSS3的網(wǎng)站高分辨率顯示器
網(wǎng)頁鏈接：http://www.muchs.cn/news12/20712.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、微信小程序、網(wǎng)站營銷、網(wǎng)站維護(hù)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)