Pehea e hoʻohana ai i nā kiʻi hoʻoholo kiʻekiʻe no nā hōʻike retina ma kāu leka uila HTML
ʻO ka Retina display kahi huaʻōlelo kūʻai i hoʻohana ʻia e Apple e wehewehe i kahi hōʻike hoʻonā kiʻekiʻe me kahi kiʻekiʻe pixel kiʻekiʻe i hiki ʻole i ka maka kanaka ke hoʻokaʻawale i nā pika pākahi ma kahi mamao nānā maʻamau. ʻO ka hōʻike retina maʻamau he 300 pixels no ka ʻīniha (ppi) a i ʻole ke kiʻekiʻe, ʻoi aku ka kiʻekiʻe ma mua o kahi hōʻike maʻamau me ka pixel density o 72 ppi.
ʻO nā hōʻike Retina i kēia manawa he mea maʻamau no nā hōʻike, laptops, nā polokalamu kelepona, a me nā papa. Nui nā mea hana i kēia manawa e hāʻawi i nā hōʻike hoʻonā kiʻekiʻe me nā density pixel e kūlike a ʻoi aku paha ma mua o nā hōʻike Retina o Apple.
CSS e hōʻike i kahi kiʻi hoʻonā kiʻekiʻe no kahi hōʻike retina
Hiki iā ʻoe ke hoʻohana i kēia code CSS e hoʻouka i kahi kiʻi hoʻonā kiʻekiʻe no kahi hōʻike Retina. ʻIke ʻia kēia code i ka nui pixel o ka hāmeʻa a hoʻouka i ke kiʻi me ka @ 2x suffix no nā hōʻike Retina, ʻoiai e hoʻouka ana i ke kiʻi hoʻonā maʻamau no nā hōʻike ʻē aʻe.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}
ʻO kekahi ala e hoʻohana i nā kiʻi vector a i ʻole SVG nā kiʻi, hiki ke hoʻonui i kekahi hoʻonā me ka nalowale ʻole o ka maikaʻi. Eia kekahi laʻana:
<div style="max-width: 300px;">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
Ma kēia laʻana, hoʻokomo pololei ʻia ka code SVG i ka leka uila HTML me ka hoʻohana ʻana i ka <svg>
tag ʻO ka viewBox
ʻO ke ʻano e wehewehe i nā ana o ke kiʻi SVG, ʻoiai ka xmlns
Hōʻike ka ʻano i ka inoa XML no SVG.
ka max-width
kau ka waiwai ma ka div
mea e hōʻoia i ka unahi ʻana o ke kiʻi SVG e kūpono i ka hakahaka i loaʻa, a hiki i ka laulā kiʻekiʻe o 300px i kēia hihia. He hana maikaʻi loa kēia no ka hōʻoia ʻana e hōʻike pono ʻia nā kiʻi SVG ma nā polokalamu āpau a me nā mea kūʻai leka uila.
'Ōlelo Aʻo: Hiki ke ʻokoʻa ke kākoʻo SVG ma muli o ka mea kūʻai leka uila, no laila he mea nui e hoʻāʻo i kāu leka uila ma nā mea kūʻai aku he nui e hōʻoia i ka hōʻike pono ʻana o ke kiʻi SVG.
ʻO kahi ala ʻē aʻe e hoʻopili ai i nā leka uila HTML no nā hōʻike Retina e hoʻohana srcset
. Me ka hoʻohana ʻana i ka hiʻohiʻona srcset hiki iā ʻoe ke hāʻawi i nā kiʻi hoʻonā kiʻekiʻe no nā hōʻike Retina me ka hōʻoia ʻana i ka nui o nā kiʻi no nā mea haʻahaʻa haʻahaʻa.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
I kēia laʻana, ka srcset
Hāʻawi ka attribute i ʻelua kumu kiʻi: image.jpg
no nā polokalamu me ka hoʻonā o 600 pixels a i ʻole, a image@2x.jpg
no nā polokalamu me ka hoʻonā o 1200 pixels a ʻoi aku paha. ʻO ka 600w
a 1200w
wehewehe nā mea wehewehe i ka nui o nā kiʻi ma nā pika, e kōkua ana i ka polokalamu kele pūnaewele e hoʻoholo i ke kiʻi e hoʻoiho ai ma muli o ka hoʻonā o ka mea.
ʻAʻole kākoʻo nā mea leka uila a pau i ka srcset
ʻano ʻano. Ka pae o ke kākoʻo no srcset
hiki ke ʻokoʻa ma muli o ka mea kūʻai leka uila, no laila he mea nui e hoʻāʻo i kāu mau leka uila ma nā mea kūʻai he nui e hōʻoia i ka hōʻike pono ʻana o nā kiʻi.
HTML no nā kiʻi ma ka leka uila i hoʻonui ʻia no nā hōʻike retina
hiki ke hoʻopaʻa inoa i ka leka uila HTML e hōʻike pono i kahi kiʻi ma kahi hoʻonā i hoʻopaʻa ʻia no nā hōʻike retina. Penei:
- E hana i kahi kiʻi hoʻonā kiʻekiʻe e pālua i ka nui o ke kiʻi maoli āu e makemake ai e hōʻike ma ka leka uila. No ka laʻana, inā makemake ʻoe e hōʻike i kahi kiʻi 300 × 200, hana i kahi kiʻi 600 × 400.
- E mālama i ke kiʻi hoʻonā kiʻekiʻe me ka @ 2x hope. No ka laʻana, inā ʻo kāu kiʻi kumu image.png, mālama i ka mana hoʻonā kiʻekiʻe e like me kiʻi@2x.png.
- Ma kāu leka uila HTML, e hoʻohana i kēia code e hōʻike i ke kiʻi:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
he ʻōlelo kūlana i hoʻohana ʻia no ka huli ʻana i nā mana kikoʻī o Microsoft Outlook, e hoʻohana ana iā Microsoft Word e hāʻawi i nā leka uila HTML. Hiki ke ʻokoʻa loa ka ʻenekini hoʻoheheʻe HTML o Microsoft Word mai nā mea leka uila ʻē aʻe a me nā polokalamu kele pūnaewele, no laila koi pinepine ia i ka lawelawe kūikawā. ʻO ka
(gte mso 9)
nānā kūlana inā ʻoi aku ka nui o ka mana o Microsoft Office ma mua a i ʻole like me 9, e pili ana me Microsoft Office 2000. |(IE)
nānā kūlana inā ʻo Internet Explorer ka mea kūʻai aku, i hoʻohana pinepine ʻia e Microsoft Outlook. HTML Email Me Retina Hōʻike Kiʻi Optimized
Eia kekahi laʻana o ka leka uila HTML pane e hōʻike ana i kahi kiʻi ma kahi hoʻonā i hoʻopaʻa ʻia no nā hōʻike retina:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Retina-Optimized Email</title>
<style>
/* Mobile-specific styles */
@media only screen and (max-width: 480px) {
/* Add mobile-specific styles here */
}
/* High-density display styles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
img {
display: block;
width: 300px !important;
height: 200px !important;
max-width: 100%;
height: auto;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 40px 0 30px 0;">
<img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Nā ʻōlelo aʻoaʻo kiʻi hōʻike retina
Eia kekahi mau ʻōlelo aʻoaʻo hou no ka hoʻomaikaʻi ʻana i kāu mau leka uila HTML no nā kiʻi i hoʻopaʻa ʻia no nā hōʻike Retina:
- E hōʻoia i ka hoʻohana mau ʻana i kāu mau kiʻi
alt
kikokiko e hāʻawi i ka pōʻaiapili no ke kiʻi. - E hoʻonui i nā kiʻi no ka pūnaewele e hōʻemi i ka nui o ka faila me ka ʻole e hoʻopilikia i ka maikaʻi o ke kiʻi. Hiki i kēia ke hoʻohana hoʻoliʻiliʻi kiʻi mea paahana, e hoemi ana i ka nui o na waihooluu i hoohana ia ma ke kii, a e hoololi hou i ke kii i kona mau ana maikai ma mua o ka hoouka ana i ka leka uila.
- Hōʻalo i nā kiʻi hope nui i hiki ke hoʻolohi i nā manawa hoʻouka leka uila.
- Hiki i nā GIF animated ke ʻoi aku ka nui o ka faila ma mua o nā kiʻi paʻa ma muli o nā kiʻi he nui e pono ai e hana i ka animation, e mālama pono iā lākou ma lalo o 1. Mb.