Медіа-запити в 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, не соромтеся висловлювати їх в коментарях нижче. Гарного настрою!