fast-je
@fast-je
Пишу на php.

Ломается верстка в хроме при уменьшении масштаба?

Ломается верстка в хроме при при уменьшении масштаба.
Пометка: macbook pro 13 macOS high sierra, chrome 65v, mozilla 59v
Ситуация следующая: верстаю я значит, потом делаю меньше масштаб, чтобы глянуть как ломается верстка, и замечаю в хроме какой-то странное поведение шрифт в хроме при уменьшении масштаба чуть-чуть становится меньше, то есть он не уменьшается содержимое одно и тоже, а блоки таких же размеров если эти размеры зафиксированы, содержимое контента начинает выезжать за блоки в итоге получается ху*** какая-то (см скриншоты 1,2). Причем, если мы будем смотреть все тоже самое в браузере mozilla (см скриншот 3), все будет просто уменьшаться и ничего соответственно ломаться не будет. Пошел я значит дальше, захожу на сайт htmlacademy.ru, уменьшаю масштаб окна и что я вижу, у них конечно тоже ломается но не так сильно, то есть у них какой-то другой подход к верстке, при котором ломается по минимуму (см скриншоты 4,5).
Да! многие читая это могут сейчас воскликнуть типа "да нахер тебе этот масштаб сдался, верстай и не смотри туда", но у меня удивляет то, что многие такие сайты как codecademy.com htmlacademy.ru telegram.org facebook.com vk.com (см скриншот 6) мы можем наблюдать, что там совсем все иначе, да ломается но не так, у них текст налазит друг друг на друга и при этом меньше ломается верстка. И тут я задумался может быть я не так верстаю, может что-то делаю не так ?
Что посоветуете ? Какие единицы для размера шрифта и line-height использовать ? Почему только в хроме такое, там движок очень сильно отличается или что ? Может подход к верстке изменить и какой тогда лучший ? Никакими фреймворками или библиотека при верстке не пользую, типа bootstrap и тому подобное. ХЗ может сетки не умею строить, не знаю как объяснить понимаю что чего-то не хватает(в плане знаний) но не знаю что.

ссылка на песочницу где я разместил свой футер

1 скрин
2 скрин

3 скрин

4 скрин
5 скрин

6 скрин
  • Вопрос задан
  • 1476 просмотров
Решения вопроса 1
@nikgavrilovich
front-end developer
для шрифта попробуй em, ww или wh
И никто не тестит верстку на уменьшении масштаба в окне, открой консоль разработчика там есть размеры под разные экраны. Если уменьшать размер экрана, то viewport не отрабатывает
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы