Использование разных стилей для разных разрешений
Как часто вы мучились при верстке с разными разрешениями мониторов? Я частенько, особенно когда макеты под все типы мониторов выглядела одинаково. В конце концов мне это надоело и с помощью гугла который мне выдал кучу маленьких недоделанных скриптов и Bosh’и который помог доделать их я решил эту проблему.
Подробности далее…
Итак, целью скрипта является загрузка разных css для мониторов размером равным или меньшим 1024*768 и всех остальных кто больше. Для начала просто протестируем:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> if (self.screen) { width = window.innerWidth } else if (self.java) { var jkit = java.awt.Toolkit.getDefaultToolkit(); var scrsize = jkit.getScreenSize(); width = scrsize.width; } if (width <= '1025') { document.writeln ("<h1>Загружаем под 1024</h1>"); } else { document.writeln ("<h1>Загружаем под > 1024</h1>"); } </script> <noscript> <h1>Вебмастер шоке! У тебя не работает js, как так?!?! </h1> </noscript> |
Итак теперь нам выводится сообщение что надо грузить, теперь просто переносим все это в
и добавить ссылки на css файлы1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <head> <script type="text/javascript"> if (self.screen) { width = window.innerWidth } else if (self.java) { var jkit = java.awt.Toolkit.getDefaultToolkit(); var scrsize = jkit.getScreenSize(); width = scrsize.width; } if (width <= '1025') { document.writeln ('<link rel="stylesheet" type="text/css" href="1024.css" media="all" />'); } else { document.writeln ('<link rel="stylesheet" type="text/css" href="wide.css" media="all" />'); } </script> <noscript> <link rel="stylesheet" type="text/css" href="1024.css" media="all" /> </noscript> </head> |
Теперь у нас загружаются разные стили, ура!
Как сделать так, чтобы содержимое моего сайта оптимизировалось и под мобильные, и под компы?
[Ответить]
ZekMan Reply:
Ноябрь 18th, 2013 at 14:59
Адаптивная верстка — лучший выбор.
[Ответить]