artur_kudaev
@artur_kudaev
Frontend Developer

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

Как задать адаптивность форме? Решил ниже 750 убрать все надписи и поставить фоном масштабируемым, оставить только импуты и вручную изменять отступы. Как вообще адаптировать такие элементы?
5a2154ba4061a564331248.png5a2154c667c55385071488.png
Каждых 20-30px все плывет
  • Вопрос задан
  • 492 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Даже если криворукость дизайнера печалит, но заказ уже взят, деваться некуда, надо делать.
И справедливости ради, не всегда именно дизайнер виноват в том, что макет выглядит именно так. Заказчики часто тоже отжигают.

Как вообще адаптировать такие элементы?

Вариантов несколько, номера не по приоритету.
1. Когда дизайнеры рисуют что-то затейливое, у них также бывает и мнение и о том, как это затейливое должно выглядеть на разных экранах. Т.е. спросить дизайнера.
2. Фон простой в смысле цветов и вы его уже сделали картинкой. Картинку масштабировать пропорционально, для шрифта и полей указывать размеры в vw. Для ретины выдавать свою картинку через media.
3. Аналогично п.2., но фон переделать в SVG.
4. На мелких экранах упрощать графику. Например, фон поделить пополам под наклоном, реализовать с помощью linear-gradient. Скосы у полей на средних размерах оставить (делать трансформом или градиентом), на совсем мелких убрать. Слова логин/пароль задавать как placeholder.

Если еще захотеть чтобы при фокусе обводка была не прямоугольником по инпуту, а на все скошенное поле, то будет вообще красота. Но пока решения как это реализовать в голову приходят только убогие. Либо двойной трансформ либо с участием JS либо несемантичные.

p.s. присоедИниться
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
Krasnodar_etc
@Krasnodar_etc
little front
Чем вообще сделана форма? Это картинка чтоль?
Киньте вёрстку в какую-нибудь песочницу типо codepen / jsfiddle или хотя бы сюда
Ответ написан
Olek1
@Olek1
SVG
Ответ написан
Комментировать
alex-1917
@alex-1917
Если ответ помог, отметь решением
Для смартфонов все свистоперделки убирай, все равно будет неразличимо.
Я так и делаю.
Цветовое сочетание можно оставить, но раскрашивать через css

Диазйн конечно такой себе.. 90-ыми запахло...
Ответ написан
Комментировать
@arturka_v_10
bootstrap + картинки замени на canvas отрисовку или помучайся блоками со свойствами css3 (наклоны, развороты)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы