• Добро пожаловать на новый компьютерный форум BestForum! Примите и Вы активное участие в его развитии! Компьютерный форум Bestforum посвящен как начинающим пользователям компьютерной и коммуникационной техники, так и специалистам и профессионалам в сфере ИТ технологий. Зарегистрироваться на форуме

Изменение стилей CSS в зависимости от ширины экрана браузера. Медиа-запросы.

Юрий

Administrator
Команда форума
Регистрация
25 Дек 2015
Сообщения
109
Симпатии
2
Возраст
36
Адрес
Киев
#1
Для использования "Резины" в шаблонах очень часто в последнее время используют медиазапросы
@Media css. Это дает достаточно много возможностей для оптимизации сайта под различные виды устройств (компьютеры, планшеты и мобильные устройства). Смысл медиазпросов в том, что в зависимости от размера ширины окна браузера в px Вы задаете определенные величины для css

Также можно указывать типы носителей, логические операторы и медиа-функции.
Более подробно о медиа-запросах можно прочитать тут.

Ну а мы рассмотрим несколько самых простых примеров.

PHP:
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}
Тему можно дополнять различными примерами использования медиа-запросов.