Різне оформлення для вертикального та горизонтального перегляду сайту

by Сергій Куліков

HTML

Запрошую у мій Telegram канал, де я ділюся корисним: https://t.me/KulikovSerhiiChannel

<br><br>##########<br><br>

Ці стилі допоможуть зробити різне оформлення сайту для вертикального та горизонтального перегляду.
<br><br>
Відкрийте зі смартфону сайт за посиланням та переверніть пристрій на 90 градусів, щоб побачити як це працює.
<br><br>
Приклад: https://kulikovserhii.pp.ua/e/01/



<br><br>##########<br><br>



<style>
/* Проста версія */

@media (orientation: portrait) {
	.selector { background-color: yellow; }
}

@media (orientation: landscape) {
	.selector { background-color: blue; }
}
</style>



<style>
/* Більш складна версія з вказаннями максимальної висоти та ширини екрану */

@media screen and (width <= 1000px) and (height <= 1000px) and (orientation: portrait) {
	.selector { background-color: yellow; }
}

@media screen and (width <= 1000px) and (height <= 1000px) and (orientation: landscape) {
	.selector { background-color: blue; }
}
</style>