Использование разных стилей для разных разрешений

Март 8th, 2011 Рубрики: CSS, JavaScript coubertin.cz www.colvillewoodworking.com

Как часто вы мучились при верстке с разными разрешениями мониторов? Я частенько, особенно когда макеты под все типы мониторов выглядела одинаково. В конце концов мне это надоело и с помощью гугла который мне выдал кучу маленьких недоделанных скриптов и 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>

Теперь у нас загружаются разные стили, ура!

Теги: , ,

2 комментария к “Использование разных стилей для разных разрешений”

  1. Arime
    Ноябрь 17th, 2013 at 14:09
    1

    Как сделать так, чтобы содержимое моего сайта оптимизировалось и под мобильные, и под компы?

    [Ответить]

    ZekMan Reply:

    Адаптивная верстка — лучший выбор.

    [Ответить]

Написать комментарий