Отзывчивый размер текста ввода

От моего понимания, width элемента, обработанного input тегом type атрибут как text определяется по его размеру. (другим фактором являются размеры шрифта, активного на этом узле DOM).Отзывчивый размер текста ввода

Не изменяя ничего о шрифте, можно ли настроить атрибут size тега input «отзывчиво», используя только CSS?

Эффект Я ищу добиться того, что для некоторых экранов шириной нам иметь размер входного быть, скажем, 20, и для других, я хотел бы, чтобы это было, скажем, 40.

Я знаю, решения JS. Ответ не будет лучше, чем решение JS. Спасибо.

EDIT: Дополнительная информация, в свете чего мой вопрос может быть немного слишком специфичным, но я решил, что все равно спрошу, почему я прошу об этом, потому что я использую бутстрап с обратной связью значок. Когда я устанавливаю ширину до 200% на основе определенного размера экрана, значок обратной связи остается на текущем положении, я мог бы изменить это, но мне не нравится это решение. Кто-нибудь знает, почему значок обратной связи не перемещается должным образом?

источник

2015-02-27 0fnt

Он чувствует себя хакерским, но вы можете установить размер шрифта на основе vw горизонтальных единиц. Однако это будет ограничивать ширину только для моноширинных веб-сайтов (где вы знаете, как отношение ширины к высоте букв).

 body { 
 
     font-size: 14px; /*fallback for old browsers */ 
 
     font-size: calc(1.4*100vw/80); 
 
     /* 1.4 is a fudge factor by inspection. */ 
 
     }

источник

2015-02-27 06:36:15

Выполнение измерений с % и эм сделает ваши элементы реагирующих

e.g. input { width: 100%; padding: .5em 1em; }

источник

2015-02-27 07:01:14

Отзывчивый размер текста ввода

ответ

Смежные вопросы