Какие медиазапросы CSS лучше для сайта с экранами с высотой 100hv?

Question

[mirti de vednis]

Был ли у кого опыт верстки сайтов с поэкранной прокруткой секций? Подразумевается, что на всех устройствах высота каждой секции всегда равна высоте экрана. Знаю, что идея сомнительная (особенно для мобильных), когда речь идет не о сайте с секциями из фона, тайтла и параграфа. Но, представим, что есть такая задача, где в каждой секции имеется определенный контент в достаточном объеме, который надо вместить на любой экран без обрезки.

Условно можно взять большие и средние мониторы ПК; планшеты и смартфоны в двух ориентациях. Стоит ли использовать комбинированные запросы вроде:

@media (max-width: 1280px) and (max-height: 640px) {}
@media (max-width: 767px) and (max-height: 480px) {}

Также по идее нужно учитывать ориентацию планшетов и мобилок:

@media (max-width: 1024px) and (orientation: landscape) {}
@media (max-width: 1024px) and (orientation: portrait) {}
@media (max-width: 767px) and (orientation: landscape) {}
@media (max-width: 767px) and (orientation: portrait) {}

Как бы вы подошли к такому проекту, какие бы запросы использовали для потенциального уменьшения объема кода и человекочасов верстки?

Answer 1

[xmoonlight]

Но, представим, что есть такая задача, где в каждой секции имеется определенный контент в достаточном объеме, который надо вместить на любой экран без обрезки.

Вы что курите?!))

Самый простой вариант: text-overflow

Comments

[mirti de vednis]

Помилуйте. Естественно стилизуя, что-то сокращая и т.п. Не в первозданном виде ПК-версии.

[xmoonlight]

mirti de vednis, Речь не идёт про ПК или не ПК-версию.
У Вас условие указано конкретное:

надо вместить на любой экран без обрезки

Вот этого:

Естественно стилизуя, что-то сокращая и т.п. Не в первозданном виде ПК-версии.

не было ранее нигде.

Эти два требования полностью противроечат друг другу.

[mirti de vednis]

xmoonlight, а вы подумайте сначала. Это условие подразумевает, чтобы вообще какой-либо контент был без обрезки (я не подразумевал тут обязательно "несокращенный").

Эти два требования полностью противроечат друг другу.

Да что вы говорите. Выше описал, почему тут нет противоречий. Да, я выразился неточно в вопросе, мы это прояснили, мое упущение. Хотелось бы теперь, когда все понятно, какой-то конкретики услышать.

Опишу еще раз. Обычно при верстке обращаем внимание на ширину девайса и по стандартным брейкпоинтам пишем стили. Я же спросил о том, какие лучше брейкпоинты выбирать, когда нам важно вписать адаптируемый(!!!) контент также и в 100vh любого девайса.

[xmoonlight]

mirti de vednis, есть 2 варианта.
1. Сетка - тут.
2. И шрифт - тут.