artur_kudaev
@artur_kudaev
Frontend Developer

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

Как задать адаптивность форме? Решил ниже 750 убрать все надписи и поставить фоном масштабируемым, оставить только импуты и вручную изменять отступы. Как вообще адаптировать такие элементы?
5a2154ba4061a564331248.png5a2154c667c55385071488.png
Каждых 20-30px все плывет
  • Вопрос задан
  • 465 просмотров
Решения вопроса 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 или хотя бы сюда
Ответ написан
alex-1917
@alex-1917
Если ответ помог, отметь решением
Для смартфонов все свистоперделки убирай, все равно будет неразличимо.
Я так и делаю.
Цветовое сочетание можно оставить, но раскрашивать через css

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

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

Войти через центр авторизации
Похожие вопросы
Медиасеть Кострома
от 30 000 до 60 000 ₽
от 100 000 до 150 000 ₽
EVEN Lab Москва
от 100 000 до 180 000 ₽
27 окт. 2020, в 15:28
100000 руб./за проект
27 окт. 2020, в 15:24
25000 руб./за проект