Адаптивный текст на кнопке

[Igorewa]

Доброго времени суток уважаемые форумчане. Хочу сделать адаптивным текст на кнопке. нашел замечательную функцию calc, все замечательно, однако при одном из разрешений с блоком происходит непонятный мне сдвиг, как на скриншоте, при остальных же разрешениях текст ведет себя, как положено. Подскажите в чем может быть проблема и пути решения.

Ссылка на код

[alanreid]

На самом деле, здесь достаточно свойства vertical-align: top.

https://jsfiddle.net/vct0uhqp/12/

Edited December 10, 2017 by alanreid

[AlexWeb]

Проблема в свойствах width и calc, а точнее в том, как вы их применяете.

Не надо так, пожалуйста

font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px);

В итоге ваша математика сюда не влезла

width:30% ;

Воспользуйтесь медиа запросами.

В них вы сможете отрегулировать размер шрифта, а также ширину, отступы, рамки блоков и их положение относительно друг друга.

Также рекомендую посмотреть как верстают резиновые макеты на Ютубе. У вас получилась слишком резиновая резина, которую тяжело контролировать.

Смысл заключается в том, что бы текст был читаемым на любом разрешении, а не соответствовал ширине экрана.

 

P.S. А вообще такие скачки блоков происходят из-за того, что они со свойством display: inline-block. Начинают подстраиваться друг под друга.

Если вы все же хотите довести этот пример до ума...

 

Edited December 10, 2017 by AlexWeb

[AlexWeb]

<div id="SECTION_2">
	<div id="DIV_3">
		<button id="BUTTON_1">
			Расширенный поиск
		</button>
	</div>
  <div id="DIV_4">
		<button id="BUTTON_2">
			Пакетное предложение
		</button>
	</div>
</div>

body {
  background-color: blue;
}

#BUTTON_1, #BUTTON_2 {
  padding:1%;
  font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px);
  background-color: blue;
  color: rgb(255, 255, 255);
  cursor: pointer;
  width:50%;
  min-height:50px;
  margin: 0 3% 0;
}

#DIV_3, #DIV_4 {
  float:left;
  width: 50%;
}

#DIV_3 {
  text-align: right; 
}

#DIV_4 {
  text-align: left;
}

Примерно так)))

[Igorewa]

3 часа назад, AlexWeb сказал:

В итоге ваша математика сюда не влезла

width:30% ;

Воспользуйтесь медиа запросами.

 

Спасибо за помощь, собственно и хотел бы от медийных запросов отказаться используя calc функцию. Ведь согласитесь удобно  шрифт задать  в одном месте, по аналогии и с шириной блоков можно сделать.

Опять таки не надо дополнительных стилей подгружать.

[AlexWeb]

Для этого можно использовать относительные единицы измерения em rem.

Откажитесь от вашей затеи пока не поздно))

[Igorewa]

Четно скажу vw мне кажутся перспективнее, ширина блока равна 30vw-5px попробуйте описать хоть на em хоть на rem

.

[AlexZaw]

vw нужно использовать аккуратно, width:10vw  на мониторе 2560 будет смотреться нормально, а вот на телефоне с шириной 750 уже не очень, не говоря уж про 320

[Igorewa]

Интересный пример, не уж то адаптировать можно лишь с помощью медиа запросов? Должна быть форула или фича позволяющая добиться корректного вида. Ведь размер текста то же измениться, на соответстующий такому разрешению.

[AlexZaw]

Иногда можно обойтись и без них , иногда без них не обойтись, иногда можно, но вместо одного медиа запроса вы так раздуете код что проще написать запрос. Да и чем они вам не угодили? Если нужна поддержка ie8 - используйте Respond.js

[Igorewa]

Не угодили медиа запросы как раз тем, что раздувают код, мое скромное мнение "если можно задать сразу и на все случаи, то это лучше чем использовать дополнительные костыли"

Ведь одной формулой получиться заменить 3 или более медиа запросов. А если учесть, что элементов может быть достаточно много и экраны появляются все новые и с новыми разрешениями, то скорее всего в формулах будущее. Просто их надо правильно подобрать. 

Вот представте, что ваш сайт адаптирован к разрешениям по ширине от 320 до 4к... Все хорошо, но тут взяли и выпустили 8к разрешение и надо что то опять добавлять и править. 

Тем интереснее если выпустят еще 10к и 12к разрешения.... и специально для мобильных 3,5к или еще каких извращений.

Я же хочу найти возможность сделать действительно резиновый шаблон.

Edited December 10, 2017 by Igorewa

[Igorewa]

2 минуты назад, alanreid сказал:

На самом деле, здесь достаточно свойства vertical-align: top.

https://jsfiddle.net/vct0uhqp/1/

Спасибо, это действительно просто.

[AlexZaw]

Резиновый сайт и адаптивный сайт это разные вещи, и не зря используют именно адаптивную верстку, так как она более удобна для пользователя

 

53 минуты назад, Igorewa сказал:

Ведь одной формулой получиться заменить 3 или более медиа запросов.

 

Формула для текста, для картинок,  для блоков,  для типа отображения блока (inline-block/block), для отмены float, для маржинов, для паддингов. Это так, навскидку. Причем если мне нужно что бы один блок при изменении ширины до определенного размера оставался фиксированного размера, а другой уменьшался то понадобится еще одна формула, а если нужно чтобы они сжимались с разной скоростью?

50 минут назад, Igorewa сказал:

А если учесть, что элементов может быть достаточно много и экраны появляются все новые и с новыми разрешениями, то скорее всего в формулах будущее. Просто их надо правильно подобрать. 

Даже если возможно подобрать такую формулу,  как вы ее в css загоните? Или будете писать километры кода на JS?

[Igorewa]

Я понимаю сомнения по данному поводу, но 90% успеха это идея, как реализовать я еще думаю, моя цель минимизировать количество кода.

Тому что нету невозможного вот подтверждение .  П.С. а кто то кричал что это сложно и не получиться.

[AlexZaw]

Эммм, причем тут физика + химия и ваша идея?

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

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

В качестве попытки - придумайте формулу с помощью которой блок на большом экране будет 100px, а на маленьком будет занимать 100% ширины.

Или формулу аналог свойства order у флексов, которая при разных размерах экрана будет менять расположение блоков.

ps. можете даже скрипты использовать, и потом сравнить кол-во кода

Edited December 10, 2017 by AlexZaw

[Igorewa]

28 минут назад, AlexZaw сказал:

Эммм, причем тут физика + химия и ваша идея?

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

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

В качестве попытки - придумайте формулу с помощью которой блок на большом экране будет 100px, а на маленьком будет занимать 100% ширины.

Или формулу аналог свойства order у флексов, которая при разных размерах экрана будет менять расположение блоков.

ps. можете даже скрипты использовать, и потом сравнить кол-во кода

Спорить лучше конструктивно, давайте сформируем задачу конкретнее. При каком условии на большом экране пусть full hd картинка будет 100px, а на маленьком путь 320 будет занимать 100%? Что это может быть за блок и для чего нужен?

Могу понять, что скажем из 3х колонок большого экрана, на маленьком должна отображаться одна колонка с большими пропорциями чем на большом. Перестроиться из 3х колоночного макета в одноколоночный. Сформулируйте пожалуйста реальную задачу и ради тяги к знаниям попробую реализовать.

Я не говорю что медиа запросы это плохо, но на примере из статьи явно видно, что можно много больше чем нам говорят и принято обществом...  Ведь только представьте, вам не нужно покупать бензин, а достаточно купить кваса для себя. Не ужто умные люди  не догадались до такого?( просто кто то на этом потеряет, вот и не получила технология развития)

 

 

[AlexZaw]

Без разницы что за блок, пускай будут кнопки в форме reset и submit, на большом экране они стоят в линию одна за другой, на маленьком занимают 100% ширины и стоят друг под другом. Дополнительно можете поменять их местами

Можете попробовать реализовать и галерею, так как написали вы, на большом экране картинки стоят 3 в ряд, на маленьком подряд.

Можете использовать любые методы. Потом сравните количество кода.

13 минуты назад, Igorewa сказал:

Не ужто умные люди  не догадались до такого?( просто кто то на этом потеряет, вот и не получила технология развития)

Идея может быть и интересная, вопрос в другом, а действительно ли кто то на этом потеряет, или стоимость затрат на получение  электричества таким образом превосходит затраты на его получение более традиционными способами?

Тот же, так называемый, двигатель на воде обойдется потребителю дороже чем двигатель на бензине

[Igorewa]

2 минуты назад, AlexZaw сказал:

Без разницы что за блок, пускай будут кнопки в форме reset и submit, на большом экране они стоят в линию одна за другой, на маленьком занимают 100% ширины и стоят друг под другом. Дополнительно можете поменять их местами

Можете попробовать реализовать и галерею, так как написали вы, на большом экране картинки стоят 3 в ряд, на маленьком подряд.

Можете использовать любые методы. Потом сравните количество кода.

Идея может быть и интересная, вопрос в другом, а действительно ли кто то на этом потеряет, или стоимость затрат на получение  электричества таким образом превосходит затраты на его получение более традиционными способами?

Тот же, так называемый, двигатель на воде обойдется потребителю дороже чем двигатель на бензине

Я попробую реализовать данные идеи.

По поводу же двигателей, разовая может и больше.... Но лучше один раз купить автомобиль в бак которому можно помочиться, чем двигатель топливо для которого вы будете покупать через 30ого перекупа.

А насчет выгод, всегда должна быть альтернатива. Можете взять брендовое яблоко, а можете неизвестного китайца. И если честно многие друзья взяв 7 и бегая за  розеткой, смотрят на меня с удивлением когда я рассказываю как 2 дня назад заряжал свой аукитель.

[AlexZaw]

Дело в другом, смотрите - "моча помещается в электролизер, который выделяет из нее водород". При помощи чего выделяется водород? При помощи электричества или при помощи химических реагентов?

Затем - "при помощи буры из водорода полностью удаляется влага" стоимость одного килограмма технической буры 120 рублей. Сколько ее нужно чтобы очистить водород? И какой мощности получился данный генератор?

Для сравнения: газовый генератор на 220В, сила тока: 10,4 А; Потребление топлива при максимальной нагрузке: 0,30 кг/кВт.ч. (пропан) / 0,40 м3/кВт.ч. (метан);

цена: пропан - 33р/кг, метан 14р/м3, итого стоимость 1 часа работы 11р на пропане, 5.6р на метане.

Не спорю, для африки это может и находка, но для развитых стран овчинка выделки не стоит, к тому же буру придется менять, не вечно же она влагу будет впитывать.

ps. впрочем с этой темой нам уже не сюда

Edited December 10, 2017 by AlexZaw

[Igorewa]

5 минут назад, AlexZaw сказал:

Дело в другом, смотрите - "моча помещается в электролизер, который выделяет из нее водород". При помощи чего выделяется водород? При помощи электричества или при помощи химических реагентов?

Затем - "при помощи буры из водорода полностью удаляется влага" стоимость одного килограмма технической буры 120 рублей. Сколько ее нужно чтобы очистить водород? И какой мощности получился данный генератор?

Для сравнения: газовый генератор на 220В, сила тока: 10,4 А; Потребление топлива при максимальной нагрузке: 0,30 кг/кВт.ч. (пропан) / 0,40 м3/кВт.ч. (метан);

цена: пропан - 33р/кг, метан 14р/м3, итого стоимость 1 часа работы 11р на пропане, 5.6р на метане.

Не спорю, для африки это может и находка, но для развитых стран овчинка выделки не стоит, к тому же буру придется менять, не вечно же она влагу будет впитывать.

ps. впрочем с этой темой нам уже не сюда

Согласен, тема эта уже не для этого форума, однако знаю точно, что если бы искали нашли бы и как бы не лет 50 назад, просто нефти много и хотелось бы ее продать, в той же германии теперь продают водород по цене дизеля, так что для тех кто решил нажиться ничего не поменялось, разве что наименование товара.

Однако с реализацией данных идей через формулы, я подумаю на досуге, не обещаю что сделаю быстро, но постараюсь, все же нету большого опыта  у меня . Будет смешно, если скажем через год или 2 я найду решение или кто то другой найдет решение и опубликует его. 

Беда нашего времени, что даже если мы найдем решение, мы не поделимся им, а постараемся его продать подороже.  Ведь капитализм мать его,  все хотят бумажек не подкрепленных ничем,  не смущает их, что ангары этих бумажек не могут поменять на то же золото, хочется сею минутной выгоды. Да и даже если поменяют, главное ведь не это, а то про кого будут читать в книжке под названием "история".

[AlexZaw]

Я думаю те кто пишет спецификацию CSS тоже не дураки, и просчитали варианты как лучше сделать и не придумали ничего лучше, по крайней мере на данный момент, в будущем кто знает, вот уже и переменные подтянулись, может и циклы и условия введут  или придумают что то похожее на вашу идею. Но пока запросы это все-таки самый простой вариант. Впрочем дерзайте, даже если ничего не получится вы приобретете опыт, а это уже плюс

[andrey7287]

Всё давно реализовано, на css-trics посмотрите как сделано. Также на хабре есть статья как делать резиновым шрифт локально. Через миксин очень удобно, использовал на продакшине.