Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 15.03.2024)
428420
осіб
347
літаків
325
гелікоптерів
6758
танків
12949
ББМ
10580
артилерія
717
ППО
1017
РСЗВ
13993
машин
26
кораблі і катери
Медіа-запити в CSS для респонсивного дизайну
Опубліковано Оновлено: 05.06.2017

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

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *