Как правильно писать медиа запрос?

Question

[SLFCM308]

Я к тому какую высоту выбирать при определенной ширине? В интернете просто везде пишут: до 768px потом 769-1024 потом 1025 и в таком духе, а как же высота? Если открыть в chrome проверку экранов и выбрать responsive то по ширине можно подогнать, но при разной высоте она по разному смотрится, тогда получается её тоже учитывать, но почему тогда многие только ширину указывают? А ещё бывает штуковина когда пишишь для ширины экрана которая больше высоты, а когда наоборот то всё летит.

Answer 1

[approximate solution]

вообщем писать адаптив для ширины экранов, а высоту исходя из надобности?

Как правило задавать высоту в media как минимум странно. Ваша высота блока должна высчитываться в зависимости от контента, поэтому как правило на больших экранах вы можете оперировать px-единицами для достижения pixel-perfect верстки. Когда вы начинаете работать с адаптивом, и крутите телефон, планшет - более удобно использовать %, em, wh\wh. Ваши блоки контент внутри будет ужиматься(без фанатизма, не убивая читабельность) в зависимости от фактической ширины девайса.

А ещё бывает штуковина когда пишишь для ширины экрана которая больше высоты, а когд наоборот то всё летит

Мой тогда Вам вопрос на засыпку, как пишут люди хорошие проекты имея под капотом только стандартную сетку бутстрапа? Значит Ваша верстка не идеальна, и вы не учитываете переполняемость контента. Перестраивайте блоки, друг под друга, не жмите контент друг к другу. Учитесь грамотно составлять UI - что бы блоки смотрелись адекватно.

Answer 2

[shva099]

Высоту указывать не надо. Достаточно ширину.

Рекомендую использовать 5 точек: маленький телефон (320), телефон (568), маленький планшет (768), планшет (992), а все что больше - это компьютер.