Медиа-запросы в CSS для респонсивного дизайна

В одной из прошлых статей мы уже рассматривали способы достижения адаптивности в веб-дизайне с помощью медиа-запросов CSS3.
С помощью CSS медиа-запросов веб-дизайнеры могут создавать стили для определенных устройств, а также при выполнении определенных условий (например, при определенной ширине, высоте или ориентации экрана устройства).

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

 

 

/* ----- Настольные компьютеры и ноутбуки ----------- */  @media only screen  and (min-width: 1224px) {  	/* ваши CSS-стили здесь */  }    /* ----- Девайсы с большими экранами ----------- */  @media only screen  and (min-width: 1824px) {  	/* ваши CSS-стили здесь */  }    /* ----- Смартфоны (ориентация экрана Portrait и Landscape) ----------- */  @media only screen  and (min-device-width: 320px)  and (max-device-width: 480px) {  	/* ваши CSS-стили здесь */  }    /* ----- Смартфоны (ориентация экрана Landscape) ----------- */  @media only screen  and (min-width: 321px) {  	/* ваши CSS-стили здесь */  }    /* ----- Смартфоны (ориентация экрана Portrait) ----------- */  @media only screen  and (max-width: 320px) {  	/* ваши CSS-стили здесь */  }    /* ----- iPhone 5 (ориентация экрана Portrait и Landscape)----------- */  @media only screen  and (min-device-width: 320px)  and (max-device-width: 568px) {  	/* ваши CSS-стили здесь */  }    /* ----- iPhone 5 (ориентация экрана Landscape)----------- */  @media only screen  and (min-device-width: 320px)  and (max-device-width: 568px)  and (orientation: landscape) {  	/* ваши CSS-стили здесь */  }    /* ----- iPhone 5 (ориентация экрана Portrait)----------- */  @media only screen  and (min-device-width: 320px)  and (max-device-width: 568px)  and (orientation: portrait) {  	/* ваши CSS-стили здесь */  }    /* ----- iPad-ы (ориентация экрана Portrait и Landscape) ----------- */  @media only screen  and (min-device-width: 768px)  and (max-device-width: 1024px) {  	/* ваши CSS-стили здесь */  }    /* ----- iPad-ы (ориентация экрана Landscape) ----------- */  @media only screen  and (min-device-width: 768px)  and (max-device-width: 1024px)  and (orientation: landscape) {  	/* ваши CSS-стили здесь */  }

/* ----- iPad-ы (ориентация экрана Portrait) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* ваши CSS-стили здесь */ }

 

Браузерная поддержка медиа-запросов

CSS медиа-запросы поддерживаются в Chrome 1+, Firefox 3.6+, Internet Explorer (IE) с версии 9+, Opera 10+, Safari 4+, а также в смартфонах и других мобильных устройствах.

 

Если у вас есть полезные идеи об использовании медиа-запросов в CSS, не стесняйтесь высказывать их в комментариях ниже. Хорошего настроения!