Cyberial
@Cyberial
Cmon disco party shits

Как писать Css в % или em?

Доброго дня, как писать сайт только и лишь в %? к примеру у меня есть шапка с 100vh, и от него мне нужно по макету отступ в %, пытался брать велечину окна, и узнавать отступы математически узнавая процент от числа, но визуально никак не сходится, затем решил протестировать, взял фиксированную высоту экрана, и сделал отступ с вверху в %, и так же не сходятся проценты, может кто что расскажем где я что пропустил? Или полезный сайт?
Гугл не гуглится, говорит вот тебе респонсив, на пиши в процентах, но я ни где не видел чтоб отступы делали в %, а я хочу это делать потому лень писать куча медиа запросов, особенно переписывать гребанные отступы!
Спасибо тостерам за то что вы хлебушки :)
  • Вопрос задан
  • 266 просмотров
Решения вопроса 1
@MaxKorz
Не рекомендуется задавать отступы в %. Поведение отступа заданного в % не интуитивно и плохо подстраивается под потребности дизайна.

Согласно спецификации:
1. Горизонтальные отступы в % рассчитываются от ширины контейнера. Здесь все логично
2. Вертикальные отступы в % так же рассчитываются от ширины контейнера. В этом ваша проблема.
Это касается как margin, так и padding.

Как еще не рекомендуется задавать отступы:
1. С помощью em, т.к. em подвержен каскадности, и это будет лишь добавлять сложности.
2. С помощью vw и vh, т.к. эти значения зависят от ширины экрана. И вы просто замучаетесь подстраивать эти значения чтобы верстка не ехала на всех разрешениях (от самых маленьких - мобильных, до огромных - 2k и 4k)

Как можно задавать отступы:
1. С помощью пикселей. Это самый простой способ, и он же единственно приемлемый для pixel-perfect верстки.
2. С помощью rem. Используя rem легче достичь гармоничности между размером шрифта и размером отступов. Этот метод применяется в Bootstrap 4. Если макет не рассчитан на использование rem, то достичь идеального совпадения верстки и макета будет сложновато.
3. С помощью calc. Если умеете, и если иначе достичь результата нельзя.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lukoie
@lukoie
0 только и лишь в % не получится
1 макет рисовал дизайнер в скетчах своих? как он там придумывал проценты эти? узнайте у него - узнаете ккак у себя делать в верстке
2 Вы calc в размерах цсс умеете юзать, надеюсь?
3 полезных сайтов много, но в таком размытом вопросе чего то конкретного посоветовать сложно
4 а гугл как гуглили? что спросили?
5 что такое отступы, и везде ли Вы смотрели, действительно ли нигде не делают? Может на то есть причина, напимер разная высота у разных девайсов, еще и с ретиной надо считаться?
6 если лень переписывать - пользуйте фреймворки и препроцессоры
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы