Подмена файла стилей

Разрешение экрана монитора

Стандартным разрешением экрана, до недавнего времени, считались размеры: 1024 px – ширина и 768 px – высота. Именно на такой монитор старались ориентироваться web мастера при верстке очередного web ресурса. Но прогресс не стоит на месте и сегодня при создании сайта необходимо учитывать все разнообразие мониторов для того, чтобы дизайн Вашего сайта отображался одинаково при любом разрешении экрана у пользователя.
Вот об этом я и хочу рассказать в этой статье.
Для начала выясним, какие свойства и каких элементов дизайна придется изменять, чтобы сохранить внешний вид веб страницы. Во-первых, это фоновый рисунок – т. е. свойство background-image для body. Далее идут: размер шрифта – font-size и размеры картинок width и height для элементов img. Как Вы уже догадались, все эти свойства находятся в одном файле стилей – style.css. Поэтому, на мой взгляд, проще всего при загрузке страницы узнать разрешение экрана монитора у пользователя, а затем в зависимости от размеров ширины (width) и высоты (height) заменить файл style.css на соответствующий данным параметрам.
Всё вышесказанное будем реализовывать при помощи javascript.

Определяем разрешение экрана пользователя


        var w = screen.width;  //- ширина экрана  монитора
        var h = screen.height; //- высота экрана монитора
      

Задаём условие

        // для разрешений меньше или равных 1024х768
        if (w <= '1024' && h <= '768')
       // или
        if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
        //если хотим задать диапазон разрешений, то можно указать ширину без высоты/
        if (w >= '1024' && w<= '1280')
       

это будет зависеть от фоновой картинки и других элементов дизайна страницы сайта.

Подменяем файл стилей style.css.

          {document.getElementById("stylesheet").href="css/style_1024х768.css";}
          

Предварительно не забудьте прописать id="stylesheet"  в подключении файла стилей:


          <link rel="stylesheet" href="css/style.css"  type="text/css" id="stylesheet" media="screen"  />
          

Функция для замены CSS в соответствии с разрешением экрана.

  function  changeCss() {
              var w =  screen.width;
              var h =  screen.height;
              if (w <=  '1024' && h <= '768')
                  {
                           document.getElementById("stylesheet").href="css/style_1024х768.css";
                  }
              else
                    {
                           if (w == '1152' && h ==  '864')
                                  {
                                           document.getElementById("stylesheet").href="css/style_1152х864.css";
                                  }
                              else
                                    {
                                             if (w == '1280'  && h == '800')
                                                   {
                                                           document.getElementById("stylesheet").href="css/style_1280х800.css";
                                                   }
                                             else
                                                    {
                                                           if (w >= '1280' && h >=  '1024')
                                                                {
                                                                      document.getElementById("stylesheet").href="css/style_1024х1024.css";
                                                               }
                                                   };
                                   };
                  };
             }; 
                  

Теперь остаётся сохранить данную функцию в файле javascript.js и перед закрывающемся тегом </head> сделать подключение и запуск.

          <script  type="text/javascript"  src="javascript.js"></script>
          <script  type="text/javascript">
          window.onload  = changeCss;
          </script>
          </head>
          

Вот и всё.

Вопросы, замечания и предложения оставляйте в комментариях.

 

Комментарии по теме: "Подмена файла стилей".

  1. автор Игорь

    Спасибо огромное! Долго думали куда и что поставить и в итоге всё поставили! У нас 40% пользователей пользуются разрешением 1024, 40% 1280, а у остальных разрешение экрана 1333 и выше. И мы решили прописать два разрешения, кто не допонял можете посмотреть наш пример на проекте "Аниме с Рутуба".

  2. автор Евгений

    PHP для решения таких задач не подойдёт, так как получать информацию о разрешении монитора или о размере окна браузера придётся всё равно на стороне клиента javascript'ом. Причем, посетитель может произвольно менять окно браузера.
    Советую вам обратить внимание на "@media only screen...". Это лучший способ сделать один сайт для всех устройств.

  3. автор Кривошеин Андрей

    Скажите, а можно ли таким же способом подключать php файлы?
    Хочу на Joomla реализовать разную верстку для разных мониторов

  4. автор Игорь

    Установил скрипт подключил в main.tpl.Но при любом разрешении экрана все равно использует только главный файл стилей style.css.

  5. автор Дмитрий

    Простите меня, пожалуйста, я не силен в js.
    Можете его исправить и выложить в готовом виде?
    Заранее благодарен.

  6. автор Евгений

    Ваш код, что ниже записываете в функцию и запускаете её не с помощью "window.onload", а с помощью $().ready(function().
    НО предворительно не забудте сделать подключение библиотеки jQuery.

  7. автор Дмитрий

    Просто я тут прочитал:

    Как раз мучаюсь над одним моментом - в момент смены файлика css, экран мигает - пока подгружается цсс-ник и картинки из него. Как можно этого избежать?

    И нашел ответ:


    1. Можно с помощью сторонних javascript - библиотек, например jQuery
    $().ready(function()
    Функция будет вызвана немедленно после того, как объектная модель готова к использованию.
    2. Можно по-пробовать
    DOMContentLoaded — это событие позволяет запускать выполнение кода сразу после того, как будет готово DOM-дерево. Это отличная альтернатива событию onload, которое срабатывает только после того, как будет загружен весь документ, включая все внешние файлы и изображения.

    Подумал что это не лишнее. К тому же таки образом я собираюсь и файлы css подключать в начале странички. Стоит ли так делать?

  8. автор Евгений

    jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
    Другими словами, jQuery применяется для более сложных задач программирования.
    В Вашем случае идеально подходит JavaScript без дополнительных библиотек.

  9. автор Дмитрий

    Придумал так:


    <script language="JavaScript">
    <!--


    var tmp1 = 4 / 3 ;
    var tmp2 = 5 / 4 ;
    var tmp3 = 16 / 9 ;
    var tmp4 = 16 / 10 ;

    var width = screen.width;
    var height = screen.height ;

    var result = width / height ;

    if (result == tmp1) {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/4_3.jpg" /></td></tr></table></div></div>');
    }
    else
    {
    if (result == tmp2) {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/5_4.jpg" /></td></tr></table></div></div>');
    }
    else
    {
    if (result == tmp3) {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/16_9.jpg" /></td></tr></table></div></div>');
    }
    else
    {
    if (result == tmp4) {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/16_10.jpg" /></td></tr></table></div></div>');
    }

    }
    }

    }

    //-->
    </script>


    как сделать все это на jQuery? Помогите плизз.

  10. автор Дмитрий

    Так я конечно запутаюсь...
    Вобщем, у меня задача: сделать так чтобы в зависимости от пропорций монирора ( 4:3 или 16:9 ) выводилась та или иная картинка. Поможете?

  11. автор Дмитрий

    Спасибо!
    А не подскажете, как на jQuerry написать это:

    <script language="JavaScript">
    <!--


    if (screen.width <= '800') {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/bg800.jpg" /></td></tr></table></div></div>');
    }
    else
    {
    if (screen.width > '800' && screen.width <= '1280') {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/bg1280.jpg" /></td></tr></table></div></div>');
    }
    else
    {
    document.write ('<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="./img/fons/bg1920.jpg" /></td></tr></table></div></div>');
    }
    }

    //-->
    </script>

  12. автор Евгений

    Дмитрий, т.к JavaScript выполняется на стороне клиента, а PHP на сервере, передать переменных из JavaScript'а PHP можно через протокол HTTP.

    <?php

    // проверяем наличие $width и $height
    if (isset($_GET['width']) && isset($_GET['height'])) {
    // если переменные существуют, то выводим их на экран
    echo 'Ширина экрана: ' . $_GET['width'] . "<br />\n";
    echo 'Высота экрана: ' . $_GET['height'] . "<br />\n";
    }

    // если переменных нет, то выполняем следующее
    else {
    // PHP сгенерирует код JavaScript, который обработает браузер
    // пользователя и передаст значения обратно PHP-скрипту через протокол HTTP
    echo "<script type=\"text/javascript\">\n";
    echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
    . "width=\" + screen.width + \"&height=\" + screen.height;\n";
    echo "</script>\n";
    }

    ?>
    Минус данного варианта - перезагрузка страницы.

  13. автор Дмитрий

    Например чтобы в переменную $W заносилась ширина, а в $h = высота! А использовать ее далее буду в php коде.

  14. автор Дмитрий

    Простите, я наверно покажусь полным лохом, но как правильно написать этот скрипт, чтобы выполнялось два условия:
    1. Если соотношение сторон монитора равно 16:9 и ширина допустим больше 800, то чтобы подключались файл css и js, и еще в какую либо переменную ( например, $bg, заносилось значение "0", чтобы потом дальше его можно было использовать на страничке.
    Простите если вопрос глуп.

  15. автор Евгений

    Да, можно:
    вычисляем высоту и ширину монитора;
    делим ширину на высоту;
    сравниваем результат с делением 4:3;
    если равно, то кубик...
    Как-то так.

  16. автор Дмитрий

    Здравствуйте!
    Можно ли на базе этого скрипта реализовать вариант когда вычисляются пропорции монитора: кубик или 16:9??
    Чтобы на фон пускать или 4:3 картинку или 16:9

  17. автор МунГ

    спасибо, все работает)

  18. автор Евгений

    Влад, если вообще ничего не понятно, то начните с изучения HTML и CSS, т.к. без твердых знаний основ, javascript осваевать бессмыслено.
    Утвердительно я не могу написать, т.к. путь к файлу стилей у каждого свой.
    Вот у Вас файл стилей "styles.css" и в подключении зачем-то указан абсолютный путь" http://домен/папка/файл
    домен-???

  19. автор Влад

    Добрый день!

    Все у Вас хорошо написано, но мне как новичку вообще ничего не понятно. Могли бы Вы утвердительно написать куда и что именно положить. Тяжеловато разобраться, когда не очень понимаешь, а хочется оптимизировать сайт. Т.к. вижу, как посетители уходят из за несоотв. разрешению.((((

  20. автор Евгений

    ID (от англ. identifier) — это уникальный идентификатор.
    Может принемать любое уникальное значение. Именно по ID метод getElementById находит HTML тег и меняет значение его атрибута (в нашем случае href="путь до файла")

    Антон, В подключенный файл нужно дописать только ID, а путь до файла, на который Вы хотите заменить необходимо прописать в коде функции:
    document.getElementById("stylesheet").href="css/style_1024х768.css";

  21. автор Антон Шуров

    Интересная тема, мне нужно подменить два файла в модуле joomla, в зависимости от разрешения экрана, файлы:
    params.xmld и style.css как я понимаю это можно осуществить в одно подключение или в два? и еще вопрос, какой id для файлов params.xmld и style.css?
    Спрашиваю потаму, что у меня не сработал этот скрипт я прописывал так: <link rel="stylesheet" href="путь до файла/params.xmld" type="text/css" id="stylesheet" media="screen" />
    Евгений подскажи, как правильно написать подключение?
    Заранее спасибо, жду ответ..

  22. автор Евгений

    В <head> подключаем библиотеку jQuery
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    Затем вместо:
    window.onload = changeCss;
    пишем:
    $(document).ready(function () {
    здесь код нашей функции(всё, что в нутри {....})
    });

  23. автор Иван

    Евгений спасибо за статью, внимательно прочитал и все заработало, но теперь другая проблема появилась, стал мигать экран при обновлении страницы.
    Можно как то решить эту проблему?
    Выше в комментарии уже задавали такой вопрос: решение которого
    1. $().ready(function()
    2. DOMContentLoaded
    эти строки что сними делать? можно пожалуйста по подробней куда их прописать или что-то ими заменить?

  24. автор Евгений

    id="" - это атрибут HTML тега
    Метод getElementById обеспечивает самый быстрый способ немедленно доступа к элементу по id - это javascript
    Иван начните с изучения HTML и CSS, а затем PHP и Javascript

  25. автор Иван

    Все равно ничего не понял, вот например : Предварительно не забудьте прописать id="stylesheet" в подключении файла стилей: что за id и куда его прописать? можно пример хотябы... или как то на словах.
    Вот еще вопрос: Задаём условие

    1 // для разрешений меньше или равных 1024х768
    2 if (w <= '1024' && h <= '768')
    3 // или
    4 if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
    5 //если хотим задать диапазон разрешений, то можно указать ширину без высоты/
    6 if (w >= '1024' && w<= '1280')
    Что делать с этим?
    и последний вопрос 3: Что это и что с этим делать?
    {document.getElementById("stylesheet").href="css/style_1024х768.css";}

  26. автор Евгений

    Это надо внимательно прочитать, чтобы понять из чего состоит данная функция замены файла CSS и всё.
    Прописывать это никуда не надо

  27. автор Иван

    Евгений подскажи поточнее, что и куда прописать? Мой сайт на joomla.
    Я так понял, что надо создать 4 файла style.css для разных расширений. Сохранить код, который приведен выше в файл javascript.js и в index.php шаблона прописать подключение и запуск, с этим все понятно. Не понятно что делать с этим:
    1
    2

    var w = screen.width; //- ширина экрана монитора
    var h = screen.height; //- высота экрана монитора
    Задаём условие

    ?
    1
    2
    3
    4
    5
    6

    // для разрешений меньше или равных 1024х768
    if (w <= '1024' && h <= '768')
    // или
    if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
    //если хотим задать диапазон разрешений, то можно указать ширину без высоты/
    if (w >= '1024' && w<= '1280')

    это будет зависеть от фоновой картинки и других элементов дизайна страницы сайта.
    Подменяем файл стилей style.css.
    ?
    1

    {document.getElementById("stylesheet").href="css/style_1024х768.css";}

    Предварительно не забудьте прописать id="stylesheet" в подключении файла стилей:


    ?
    1

    <link rel="stylesheet" href="css/style.css" type="text/css" id="stylesheet" media="screen" />

    Куда это вставлять?

  28. автор Евгений

    Игорь, всё тоже самое:
    прописываете id в подключении JS файла и меняете вместо "href" атрибут "src"

  29. автор Игорь

    Евгений молю вас о помощи, очень нужно адаптировать ваш скрип под подключение разных JS скриптов в зависимости от разрешения пользователя.
    В сайте исполюзуются сложные 3D галереи некоторые параметры которых можно редактировать только внутри модуля.
    Заранее благодарен.

  30. автор Евгений

    Нет смысла подменять несколько файлов.
    Те параметры, которые необходимо заменить при изменении разрешения экрана, надо прописать в один файл css.

  31. автор Валентин

    А если файлов css много, как сделать так, чтобы в js коде не указывался конкретный файл а только папка, а конкретный файл можно было бы указать в html, только менялися имена папок при разных разрешениях - т.е путь до файла.
    например в 3-х разных папках css файлы с одинаковыми именами.

  32. автор Евгений

    1. Можно с помощью сторонних javascript - библиотек, например jQuery
    $().ready(function()
    Функция будет вызвана немедленно после того, как объектная модель готова к использованию.
    2. Можно по-пробовать
    DOMContentLoaded — это событие позволяет запускать выполнение кода сразу после того, как будет готово DOM-дерево. Это отличная альтернатива событию onload, которое срабатывает только после того, как будет загружен весь документ, включая все внешние файлы и изображения.

  33. автор Александр

    Как раз мучаюсь над одним моментом - в момент смены файлика css, экран мигает - пока подгружается цсс-ник и картинки из него. Как можно этого избежать?

  34. автор Евгений

    Такой вариант необходимо исключить, задавая условия "if"

  35. автор Онувиделсолнце

    подскажите, а если не будет css файла под какое-то определенное разрешения никакой не подключится?

  36. автор Евгений

    на каждое разрешение монитора javascript выберет нужный стиль css

  37. автор Полтергейст

    Получается ява скрипт управляет одним стилем CSS, или на каждое разрешение монитора, нужно подключать разные стили?

  38. автор Евгений

    <link rel="stylesheet" href="css/style.css" type="text/css" id="stylesheet" media="screen" />
    Это прописывается в .html файле, в <head>.....</head>
    Это подключение файла стилей .css

  39. автор Юлия

    Здравствуйте) попробовала выполнить, только вот не могу понять, ((((<link rel="stylesheet" href="css/style.css" type="text/css" id="stylesheet" media="screen" /> )))) -- это прописывать в отдельно созданном javascript.js? я прописала, но выдает ошибку 6 на строке if (w == '1280' && h == '1024') – //для разрешения 1280х1024/...может быть я что то не так делаю?..

  40. автор Евгений

    Большая просьба, оставлять сообщения только по данной теме. Спам, реклама и т.д. будут удаляться.

Добавить комментарий