HTML5和CSS3：讓你的網(wǎng)站為高分辨率顯示器做好準備
幾年前，當(dāng)蘋果公司推出一種新的高分辨率顯示器，即所謂的視網(wǎng)膜顯示器，iPhone、iPad和MacBook時，它們開創(chuàng)了顯示質(zhì)量的新時代。在這樣的屏幕上，人眼無法分辨單個像素。
高分辨率顯示器是常態(tài)，也不例外。今天，你會發(fā)現(xiàn)越來越多的中端高分辨率移動設(shè)備。許多應(yīng)用程序是高清兼容的，現(xiàn)在你可以使用HTML5、CSS3和JavaScript創(chuàng)建高分辨率網(wǎng)站，而不需要額外的JavaScript庫。
雙像素密度引起的雙銳度
移動設(shè)備使用320像素的默認寬度，所以很多移動網(wǎng)站設(shè)計寬度。然而，高分辨率的顯示器有兩個或更多的像素。這將被放大，以防止站點上顯示一半大小的兩倍密度。此工作的字體和矢量圖形都很好。位圖。然而，諸如JPEG和PNG文件的格式變得模糊和失真。
海曙網(wǎng)站設(shè)計建設(shè)由于這種顯示越來越流行，提供高質(zhì)量的Web項目是Web設(shè)計人員和開發(fā)人員的重要因素。
HTML5、SRCSET屬性
長期以來，人們一直努力在HTML5中提供高分辨率的顯示圖像。srcset屬性已經(jīng)成為選方法。它允許您定義具有不同像素密度的多個文件源。像素密度定義以下參考圖像中的一個空間，例如，TWO像素密度。
與LT；IMG的SRCSET=圖像。JPG，圖像@ src="/upload/pic19/ 2xSrc= jpg圖像。寬度＝320高度＝160ALT＝/>；
在上面的示例中，通過srcset定義了兩個文件。第一個文件是用于標準像素密度的設(shè)備。對于標準像素密度，該值可以是1x。這是一個兩像素密度顯示文件。SRC屬性應(yīng)該作為舊瀏覽器回滾。同時，參考正常圖像h。艾爾。
在高分辨率顯示中對比兩幅圖像：兩像素密度（上）和標準像素密度（下）
還可以在文件源中添加srcset屬性，該屬性具有圖像的適當(dāng)物理寬度和高度，而不是定義像素密度。
用LT；IMG SRCSET＝IMAGE src="/upload/pic19/ 3W，IMAGE src="/upload/pic19/響應(yīng)SRC= IMAGE 640W JPG.ALT= />；
如果選擇后者，如果不使用高度或?qū)挾葘傩?，則圖像將縮小到瀏覽器窗口的寬度。在瀏覽器中為設(shè)備選擇適當(dāng)?shù)奈募?。如果設(shè)備的屏幕寬度達到320像素src="/upload/pic19/。分辨率超過320像素，它將使用文件映像src="/upload/pic19/。
通過使用大小屬性，您可以調(diào)整圖像顯示的寬度。您需要指定媒體信息以及優(yōu)先級圖像寬度。
對于LT;IMG src="/upload/pic19/ src="/upload/pic19/響應(yīng)大小=最小寬度：320px)50vw，(大寬度：320px)100vwSRC=bild-640wJPG.ALT=/>；
在上面的例子中，圖像將減少到至少320像素(最小寬度：320)的視口(50vw)的50%的寬度。如果小于320像素，則圖像將占據(jù)整個視口寬度(100vw)。
HTML 5-CSS3-PixeldCiTe尺寸
不同寬度：肖像模式100%和景觀模式50%視圖
只能在像素密度（例如，2）或?qū)挾群透叨龋ɡ纾?20W 160h）內(nèi)定義srcset文件引用。
srcset屬性還具有與它們相關(guān)聯(lián)的新作品和元素，允許您定義不同顯示窗口大小的圖像。您還可以定義不同像素密度的來源。
圖片和GT；
源SRCSET＝IMAGE src="/upload/pic19/，IMAGE 640W@ src="/upload/pic19/ 2X Media＝（最小寬度：3px）/>；
源SRCSET＝IMAGE src="/upload/pic19/，IMAGE -3WWsrc="/upload/pic19/ 2X媒體=（大寬度：3px）/>；
IMT SRC=圖像640W JPG。寬度＝320高度＝160ALT＝/>；
L/；圖片和GT；
在上面的示例中，四個文件的來源是通過兩個元素文件image-320w.jpg和image-320w@src="/upload/pic19/，顯示窗口的寬度將小于320像素(取決于像素密度)。0像素。請記住，元不知道寬度和高度屬性。如果你想定義大小，你需要使用CSS。
不要忘記提供IMG>備份舊瀏覽器。
Chrome 38+和Firefox 38+都支持Srcset、size屬性和meta。Internet Explorer目前不支持屬性和元素。Android Chrome 40和iOS 8.1Safari瀏覽器。Safari只支持其中的一小部分。
如果希望使用srcset不支持的瀏覽器的屬性，則可以獲得模仿舊瀏覽器功能的Poly.。
CSS3與圖像集（）
還可以定義使用具有不同像素密度的CSS3的圖像源。這是image-set()。與HTML5的屬性srcset類似，可以通過URL()引用多個文件。.-set()可以通過URL()用作圖像源。
主體{背景-圖片：URL(Mercury.JPG；背景-圖片：圖片-配置(URL(mercury.JPG)1x，URL(hg@src="/upload/pic19/)2；
}
海曙網(wǎng)站設(shè)計建設(shè)在上面的示例中，兩個像素密度通過背景圖像表示image-set()。目前，您應(yīng)該使用適當(dāng)?shù)墓?yīng)商前綴標記，如-WebKit-image-set()。同樣，它也許會退避。這是一個重要的后退圖像集()。不知道圖像集（）會忽略第二個背景圖像屬性。所有其他瀏覽器都將執(zhí)行第二個屬性并重寫第一個屬性。
HTML 5-CSS3-PixelDeCHT-HG
高分辨率背景（第一部分）和正常分辨率背景（第二部分）
image-set()符號是Safari Chrome 31+、7.1+和Android Chrome 40+，它們當(dāng)前支持iOS。Firefox和IE瀏覽器不支持它。
除了圖像集（）符號之外，它還支持具有不同像素密度的圖像。還有媒體查詢，考慮不同的像素密度和任何CSS屬性的最小和大分辨率。
媒體屏幕（最小分辨率：2DPPX）{體{背景：URL（HG@ src="/upload/pic19/）；
}
}
在上面的示例中，背景圖通過最小化分辨率顯示了兩個像素的密度。單位DPPX表示每個像素的像素密度。但是還有其他單位DPI（每英寸的點），它們允許以打印分辨率提供圖像，或者DPCM（每厘米的點）。它是DPPX屏幕。
分辨率特性由chromium+31和Firefox 35+支持。Internet Explorer只支持版本9中的DPI單元。Android Chrome支持版本40和iOS版本7.1，但是Safari只有舊符號設(shè)備的最小或大設(shè)備像素比。
替代方案：只有高分辨率的Bitmaps
新的HTML5元素和屬性允許您為不同的分辨率和像素密度進行成像；但是，您通常生成不同的圖像文件。，并且您需要手動生成文件變體。
那些想要保留的人也需要考慮高像素密度可以采取中間路線，這要求所有像素密度只有一個文件。創(chuàng)建一個雙分辨率-好質(zhì)量退化-圖像文件，并將其嵌入到HTML文檔的一半分辨率中。法師，看起來會像這樣：
IMT SRC=圖像640W JPG。寬度＝320高度＝160ALT＝/>；
高清屏幕顯示完全的物理分辨率，屏幕圖像的標準尺寸減少到一半。使用標準像素密度，您不會注意到質(zhì)量損失的任何增加。雙像素密度仍然提供了比正常分辨率更好的圖像質(zhì)量。我會得到的。
另一方面，標準的分辨率顯示器會下載不必要的大文件。因此，只能使用高度壓縮的JPEG文件。
HTML5-CSS3-PixeldCeTe-壓縮
半壓縮高壓縮JPEG文件（第一部分）
還可以使用CSS雙分辨率組合圖像。屬性背景大小允許將圖像的分辨率降低一半。
正文{背景圖片：URL（水星）。背景尺寸：32 px 16px；
如果例子中的背景圖像的分辨率是64x 32像素，那么它將顯示一半的大小。
使用SVG和ICONBONTS
所有新的瀏覽器都基于SVG格式的支持向量。尤其是logo，但是還有很多其他的圖形元素矢量圖形，并且作為GIF或PNG文件嵌入到網(wǎng)站中。由于SVG格式，矢量圖形也可以顯示在網(wǎng)站上，而不管您是否使用HTML throug。HIMG>
SVG的優(yōu)點應(yīng)該是明確的：它是基于矢量的，它總是以最好的分辨率顯示，此外，它使帶寬和節(jié)省時間，因為它不需要提供不同的分辨率和像素密度。
圖標字體的高清晰度顯示是SVG的一個不錯的選擇，因此基于矢量的字體具有最好的分辨率。
如果你想對SVG下注，不要排除舊的瀏覽器不支持SVG，你可以使用一些備份技術(shù)。
利用JavaScript確定像素密度
有時，例如通過JavaScript在畫廊中加載圖片。您可以直接加載具有適當(dāng)像素密度的正確圖像源，而不是通過JavaScript生成IMG><element所有srcset引用。
JavaScript知道屬性DeVixExxEL比率，它指示像素密度。
IF（窗口）。設(shè)備像素比和Gt；1）{IMG對應(yīng)于文件{ 0 }。SRC= IMAGE @ src="/upload/pic19/；
}
在上面的示例中，如果像素密度高于1負載，則將生成圖像文件。邏輯上，只能讀取屬性。
在使用設(shè)備像素比時要記住一點：值取決于瀏覽器的實際放大倍數(shù)。如果文件在150%的瀏覽器中放大并顯示，則設(shè)備像素比提供1.5標準像素密度的值。2像素de的顯示值在相同的比例因子下，NISE為3。海曙網(wǎng)站設(shè)計建設(shè)
結(jié)論及相關(guān)環(huán)節(jié)
為Web項目準備高清晰度顯示器可能是一項具有挑戰(zhàn)性的任務(wù)。但是，應(yīng)該始終考慮高像素密度，尤其是在處理新項目時。所有解決方案

網(wǎng)頁題目：海曙網(wǎng)站設(shè)計建設(shè)：提高你的HTML5和CSS3技術(shù)為高分辨率做好準備
分享路徑：http://www.rwnh.cn/news14/225964.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、手機網(wǎng)站建設(shè)、外貿(mào)建站、自適應(yīng)網(wǎng)站

廣告

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