CSS Медіа-запити для різних пристроїв

44

CSS Медиа-запросы для различных пользовательских устройств

В якості шпаргалки, зібравши інформацію з різних джерел, склав ось такий, невеликий набір стандартних правил css медіа-запитів, для різних типів пристроїв і режимів їх орієнтації, залежно від положення телефону або планшета в руках користувача.
Так в портретному режимі portrait, коли висота перевищує довжину, і в альбомному режимі landscape, коли ширина більше висоти, ну і звичайно ж, комбіновані варіанти використання цих режимів.

Ось кілька поширених медіа-запитів, які можуть виявитися корисними при проектуванні динамічного сайту з адаптивним дизайном:

/* Смартфони (портретний і альбомний режими) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (альбомний режим) ----------- */
@media only screen
and (min-width : 321px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (портретний режим) ----------- */
@media only screen
and (max-width : 320px) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний і альбомний режими) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Додаємо сюди стилі*/
}
/* iPad (альбомний режим) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний режим) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}
/* Настільні комп'ютери і ноутбуки ----------- */
@media only screen
and (min-width : 1224px) {
/* Додаємо сюди стилі*/
}
/* Великі екрани ----------- */
@media only screen
and (min-width : 1824px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний і альбомний режими)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (альбомний режим)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний режим)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}

/* Смартфони (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (альбомний режим) ———– */
@media only screen
and (min-width : 321px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (портретний режим) ———– */
@media only screen
and (max-width : 320px) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Додаємо сюди стилі*/
}
/* iPad (альбомний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}
/* Настільні комп’ютери і ноутбуки ———– */
@media only screen
and (min-width : 1224px) {
/* Додаємо сюди стилі*/
}
/* Великі екрани ———– */
@media only screen
and (min-width : 1824px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний і альбомний режими)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (альбомний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}

Як ми знаємо, Apple є піонером в області розробки і випуску на світовий ринок смартфонів і планшетних продуктів споживчого класу, так що більшість медіа-запитів орієнтовані саме на розміри екранів цих пристроїв. Так само додав медіа-запит для великих екранів моніторів персональних комп’ютерів.
Більшість сучасних браузерів (включаючи браузери для смартфонів) підтримує CSS-медиазапросы, а ось в Internet Explorer 8 підтримка медіа-запитів, як і раніше відсутня, для цього гальма прогресу застосовують всілякі милиці і примочки начебто Respond.js, але це вже зовсім інша історія.

З повагою, Андрій

Буду вдячний, якщо поділитеся посиланням на запис з друзями в своїх соц. мережах