Blog, Magamról

Retinásítás

2012-10-23

[vc_row][vc_column width=”1/1″][vc_column_text]Mivel nagy Apple kedvelő vagyok és használok pár készüléket is, így muszáj volt “retinásítani” a blogom. Ez annyiból áll, hogy néhány képet négyszer akkorára kell szerkesztenem és, ha retinás eszközt észlel a weboldal akkor kicserélni azokra a nagyobb képekre. Ehhez szükség volt egy javascript-re ami kicseréli a képeket, ha észleli az eszközt. Egyszerű a használat nagyon, először is helyezzük el a “retina.js”-t egy mappába és hívjuk meg a szokásos kóddal:[/vc_column_text][vc_column_text]<script type=”text/javascript” src=”/scripts/retina.js”></script>

Majd a .”css” fájlunkban a retinásításra váró div alá írjuk be ezt:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.valamilyendiv {
background: url(‘kepek/nagyattila-2x.png’) no-repeat;
background-size: 205px 51px;
}
}[/vc_column_text][vc_column_text]A lényeg, hogy ha van egy 205*51-es méretű képünk, ezt meg kell csinálnunk négyszer ekkorában, tehát 410*102-ben. A duplaméretű képet a css lecsökkenti 205*51-re, így szép élesen fog megjelenni retina eszközön.

nagyattila

nagyattila.org nem retina logó

nagyattila.org retinásított logó

nagyattila.org retinásított logó

[/vc_column_text][/vc_column][/vc_row]


Notice: Undefined variable: post in /home/savethes/nagyattila.org/html/wp-content/plugins/hemlock-core/inc/social_share.php on line 22

Notice: Trying to get property 'ID' of non-object in /home/savethes/nagyattila.org/html/wp-content/plugins/hemlock-core/inc/social_share.php on line 22

Még ez is tetszhet