Запрет изменения размера кнопки при переходе иконки

Лучшим решением было бы использовать так называемые запросы элементов. Тем не менее, они не являются стандартными, спецификации не существует, и единственный вариант - использовать одну из доступных полипол / библиотек, если вы хотите пойти этим путем.

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

Существует несколько полипол / библиотек, которые решают проблему по-разному (можно назвать обходные решения вместо решений хотя):

• Запросы элементов CSS - https://github.com/marcj/css-element-queries
• BoomQueries - https://github.com/BoomTownROI/boomqueries
• eq.js - https://github.com/Snugug/eq.js
• ElementQuery - https://github.com/tysonmatanich/elementQuery
• И еще несколько, которые я не буду перечислять здесь, но вы бесплатно для поиска. Я бы не смог сказать, какой из доступных в настоящее время вариантов лучше. Вы должны попробовать несколько и решить.

Я видел другие решения аналогичных проблем. Обычно они используют таймеры или размер окна / видового экрана под капотом, что не является реальным решением. Более того, я думаю, что в идеале это должно решаться главным образом в CSS, а не в javascript или html.