Стили сайта под разное разрешение

Просмотров: 5269Комментарии: 8
ПрограммированиеJavascript
Стили сайта под разное разрешение

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

Во-первых, таблица не вся вмещается в экран, приходится прокручивать каждый раз страничку.

Во-вторых, слишком большый шрифты в разных частях таблицы.

Проблему пришлось решить подключением нескольких файлов стилей сайта под разное разрешение (*.css) для разных разрешений.

Как это сделать?

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

Для начала внутри тега head, в самом конце, добавим строки

<script type="text/javascript">
{
   //При ширине экрана < 1280
   if (screen.width < 1280)
       document.write ('<link rel="stylesheet" href = "main1024.css" type="text/css">');
   //иначе
   else
       document.write ('<link rel="stylesheet" href = "main.css" type="text/css">');
}
</script>

Теперь можно создать копию файла main.css и переименовать ее в main1024.css. Теперь в этом файле стилей можно изменить все элементы font-size на меньше, например, на 1 пункт. Также нужно изменить размеры изображений параметрами width и height.

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

Пример подключения файлов стилей

<script type="text/javascript">
{
   if (screen.width <= 1024)
       document.write ('<link rel="stylesheet" href = "main1.css" type="text/css">');
   else if (screen.width == 1152)
       document.write ('<link rel="stylesheet" href = "main2.css" type="text/css">');
   else if (screen.width == 1280)
       document.write ('<link rel="stylesheet" href = "main3.css" type="text/css">');
   else
       document.write ('<link rel="stylesheet" href = "main4.css" type="text/css">');
}
</script>

Комментариев: 8 RSS

1 Руслан Сафин 13-07-2011 21:59

Руслан.

Если не трудно, сделай плиз плагин попапа на MS

наподобие popup-domination для вордпресса

2 Admin 16-07-2011 13:11

ну простой плагин наподобие сделать легко, вот сделать расширенные настройки будет сложновато.

5 Андрей 22-09-2011 02:08

Спасибо, так же можно с помощью javascript динамически изменять страницу в зависимости от изменения мастшаба страницы, либо формировать код при открытии страницы тем же javascript, не подгружая полностью css файл, который половину несет того же, а просто изменить необходимое (легче с Jquery).

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

6 Андрей 22-09-2011 02:09

Чуть не забыл.

Вот тут обсуждалось как отлавливать изменение масштаба.

http://forum.dklab.ru/viewtopic.php?p=159455

7 Васек 14-05-2013 22:04

с использованием JS ? Злое зло ! Все можно сделать без скриптов. Автору читать про "Адаптивную верстку", а именно - о методах применения стилей в зависимости от разрешения.

Позорище.

8 Admin 15-05-2013 12:16

Без скриптов? А зачем? Может еще и без картинок сайты будем делать? Важна была скорость реализации, а не красота кода. Стили были уж совсем разные в моем проекте. Для полноценного сайта конечно же лучше использовать адаптивную верстку.

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

(обязательно)