CSS3 Media Queries

CSS3 Media Queries адаптирует содержимое для отображения его на разных размерах монитора, настольных ПК, мобильных устройств, планшетов и т.к. Проще говоря, применяются разные стили для каждого размера монитора. Например, вы можете иметь один стиль для большого дисплея а другие стили специально для мобильных устройств. Это довольно интересно, поскольку позволяет отобразить содержимое без изменений, на любом устройстве.

Демо

Максимальная ширина

Код CSS3 Media Queries будет применяться, если область просмотра меньше, чем 600px.



@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}


Если вы хотите сделать ссылку на отдельную таблицу стилей, нужно дописать ссылку на стиль, между <head> и </head> .



<link rel="stylesheet" media="screen and (max-width: 600px)" href=
http://pixelcom.crimea.ua/"small.css" />


Минимальная ширина

Следующий код CSS3 Media Queries будет применяться, если область просмотра больше 900px.



@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}


Множественные запросы CSS3 Media Queries

Можно объединить несколько запросов CSS3 Media Queries. Следующий код будет применяться, если область просмотра 600px и 900px.



@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}


Ширина устройства

Следующий код будет применяться, если устройство шириной 480px (например, дисплей iPhone).



@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}


Для iPhone 4

Стиль подключается специально для iPhone 4.



<link href=
http://pixelcom.crimea.ua/"iphone4.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" />


Для IPad

Вы можете также использовать средства массовой информации запрос для выявления ориентации (альбомный или книжный) на IPad.



<link href=
http://pixelcom.crimea.ua/"portrait.css" rel="stylesheet" media="all and (orientation:portrait)" />
<link href=
http://pixelcom.crimea.ua/"landscape.css" rel="stylesheet" media="all and (orientation:landscape)" />


CSS3 Media Queries для Internet Explorer

К сожалению, CSS3 Media Queries не поддерживается в Internet Explorer 8 и старее. Вы можете использовать JavaScript.

Примеры сайтов

Hicksdesign
  • Большой размер: 3 колонки в боковой панели
  • Меньше: 2 колонки боковой панели (средняя колонка сливается с первой колонкой)
  • Еще меньше: 1 колонка в боковой панели (правая маленькая колонка прыгает вверх под логотип)
  • Самый маленький размер: нет боковой панели (логотип и колонки боковой панели находятся внизу)
CSS3 Media Queries

Colly

Схема переключения между колонок, 2 колонки, 4 колонки, и в зависимости от размера монитора.

CSS3 Media Queries
A List Apart
  • Большой размер: навигация в верхней части, 1 ряд фотографий
  • Средний размер: навигация с левой стороны, 3 колонки фотографий
  • Маленький размер: меню на верху, и нет фоновое изображение логотипа, 3 колонки фотографий
CSS3 Media Queries
Tee Gallery

Этот пример очень похож на предыдущий Colly , но разница в образах TeeGallery размера, как макет stretchs. Хитрость здесь заключается в использовании относительной величины процента вместо фиксированных пикселей (то есть ширина = 100%).

CSS3 Media Queries

Заключение

Имейте в виду: CSS3 Media Queries, предназначен для презентации, а не для оптимизации CSS. Как оптимизировать адаптивный дизайн рассказывается здесь

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>