Létezik egy technika, amivel különböző felbontású eszközökre külön css stílusokat tudunk meghívni. Példa 1200 pixelnél kisebb és nagyobb méretekre:
1 2 | <link rel="stylesheet" media="screen and (max-device-width: 1199px)" href="style.css" /> <link rel="stylesheet" media="screen and (min-device-width: 1200px)" href="style-1200.css" /> |
A gond az, hogy a designerek kedvenc böngészője, az Internet Explorer fittyet hány erre. Ez a probléma orvosolható egy egészen egyszerű jQuery javascript függvénnyel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script src="http://code.jquery.com/jquery-latest.js"></script> //először meghívjuk a legfrissebb jQuery scriptet <script> if ( $.browser.msie ) { //ha Internet Explorer-rel van-e dolgunk, folyatjuk $(document).ready( function() { $("head").append("<link>"); css = $("head").children(":last"); if (document.documentElement.clientWidth > 1199) { // ha a böngésző szélessége nagyobb, mint 1199 pixel, akkor meghívjuk a kívánt css-t css.attr({ rel: "stylesheet", type: "text/css", href: "/css/style-1200.css" }); } else { // ha kisebb, akkor más css-t hívunk meg css.attr({ rel: "stylesheet", type: "text/css", href: "/css/style.css" }); } }); } </script> |
Láthatjátok működés közben a weboldalamon. Jelenleg fotós vagyok, de kevesen tudják, hogy régebben foglalkoztam programozással és design-nal is, ezért ne lepődjetek meg, hogy nem egy programozói blogra látogattatok :)
Gondolkodtam ezen már régebben, de lusta voltam belemerülni. Pont jókor írtad ezt a posztot, köszönöm :)