Media Queries

Ваше текущее media-состояние

Yes / No Name description query
  Desktops and laptops Your screen is a normal sized screen @media only screen and (min-width : 1224px)
  Large screens Your screen is a large sized screen @media only screen and (min-width : 1824px)
  iPhone 4 You are on an iPhone 4 @media only screen and (-webkit-min-device-pixel-ratio: 2)
  iPad portrait You are on an iPad portrait @media screen and (device-width: 768px) and (orientation: portrait)
  iPad landscape You are on an iPad landscape @media screen and (max-device-width: 1024px) and (orientation: landscape)
  Screen You are on a screen @media screen
  Handheld You are on a handheld @media handheld
  Aural You are on a aural @media aural
  Braille You are on a braille @media braille
  Projection You are on a projection @media projection
  Tty You are on a tty @media tty
  Tv You are on a tv @media tv
  Print You are on a printer @media print
  Smartphones (portrait and landscape) You are on a smartphone @media screen
and (min-device-width : 320px)
and (max-device-width : 800px)
  Smartphones (landscape) You are on a smartphone in landscape mode @media screen and (min-device-width : 321px) and (max-device-width : 800px)
  Smartphones (portrait) You are on a smartphone in portrait mode @media screen and (max-device-width : 320px)

Поддержка Media Queries в браузерах

IE Firefox Chrome Safari Opera iOS Safari Opera Mini Opera Mobile Android Browser
13 versions back 4.0: Supported
12 versions back 5.0: Supported
11 versions back 6.0: Supported
10 versions back 2.0: Not supported 7.0: Supported
9 versions back 3.0: Not supported 8.0: Supported
8 versions back 3.5: Supported 9.0: Supported 9.0: Not supported
7 versions back 3.6: Supported 10.0: Supported 9.5-9.6: Supported
6 versions back 4.0: Supported 11.0: Supported 10.0-10.1: Supported
5 versions back 5.0: Supported 12.0: Supported 10.5: Supported
4 versions back 5.5: Not supported 6.0: Supported 13.0: Supported 3.1: Partial support 10.6: Supported 10.0: Supported
3 versions back 6.0: Not supported 7.0: Supported 14.0: Supported 3.2: Partial support 11.0: Supported 3.2: Supported 11.0: Supported 2.1: Supported
2 versions back 7.0: Not supported 8.0: Supported 15.0: Supported 4.0: Supported 11.1: Supported 4.0-4.1: Supported 11.1: Supported 2.2: Supported
Previous version 8.0: Not supported 9.0: Supported 16.0: Supported 5.0: Supported 11.5: Supported 4.2-4.3: Supported 11.5: Supported 2.3: Supported 3.0: Supported
Current 9.0: Supported 10.0: Supported 17.0: Supported 5.1: Supported 11.6: Supported 5.0: Supported 5.0-6.0: Supported 12.0: Supported 4.0: Supported
Near future 10.0: Supported 11.0: Supported 18.0: Supported 6.0: Supported 12.0: Supported
Farther future 12.0: Supported 19.0: Supported
Глобальная статистика:
Поддержка: 70.46%
Частичная поддержка: 0.02%
Всего: 70.48%
Green
Есть
Red
Нет
Greenish yellow
Частично
Gray
Неизвестно

Поддержка media queries в мобильных email-клиентах

Gmail не поддерживает embedded CSS, поэтому не сюрприз, что media queries не поддерживаются в мобильных приложениях и веб-интерфейсе Gmail. Однако нативные почтовые клиенты для iPhone и iPad обладают полной поддержкой media queries

Несколько полезных ссылок на эту тему:

Разрешения экранов в зависимости от высоты

Разрешения экранов в зависимости от ширины

Доступное пространство для сайта в зависимости от ширины

Визуальное сравнение доступного пространства в зависимости от высоты

CSS cниппеты

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
//css code here
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
//css code here
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
//css code here
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
//css code here
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
//css code here
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
//css code here
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
//css code here
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
//css code here
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
//css code here
}

/* BlackBerry Torch -------- */
@media screen and (max-device-width: 480px) {
//css code here
} 

/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
//css code here
} 

/* Dell Streak 7 --------- */
@media (max-device-width: 800px) {
//css code here
} 

/* Motorola's Xoom -------- */
@media (max-device-width: 1280px) {
//css code here
} 

/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
//css code here
} 

HTML cниппеты

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

Media Queries с помощью JS

Полезные ссылки

Видео о Media Queries и Responsive Web Design

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

6 мнений о Media Queries

  1. Pingback: useful blogs and sites | Pearltrees

  2. Pingback: mobile | Pearltrees

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

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