D
D
Dmitry Tarasov2018-03-30 01:22:32
Google Chrome
Dmitry Tarasov, 2018-03-30 01:22:32

Breaks layout in chrome when zooming out?

The layout in chrome breaks when zooming out.
Tag: macbook pro 13 macOS high sierra, chrome 65v, mozilla 59v
The situation is as follows: I make layout, then I make a smaller scale to see how the layout breaks, and I notice some strange behavior in chrome, the font in chrome becomes a little smaller when the scale is reduced, that is, it does not decrease the content is the same, but blocks of the same size, if these sizes are fixed, the content of the content starts to go beyond the blocks, as a result, it turns out some kind of xy*** (see screenshots 1,2). Moreover, if we watch everything the same in the mozilla browser (see screenshot 3), everything will simply decrease and nothing will break accordingly. So I went further, I go to the site htmlacademy.ru, zoom out the window and what I see, of course, they also break down but not so much, that is, they have some other approach to layout, in which it breaks to a minimum (see screenshots 4.5).
Yes! many reading this may now exclaim like "fuck this scale, you gave up, typeset and don't look there", but I'm surprised that many sites like codecademy.com htmlacademy.ru telegram.org facebook.com vk.com (see screenshot 6) we can observe that everything is completely different there, but it breaks but not like that, their text overlaps each other and at the same time the layout breaks less. And then I thought, maybe I'm not typing this way, maybe I'm doing something wrong?
What do you advise ? What units for font size and line-height should I use? Why is it only in chrome, is the engine very different there or what? Maybe change the approach to layout and what is the best one then? I don’t use any frameworks or libraries for layout, such as bootstrap and the like. HZ maybe I don’t know how to build grids, I don’t know how to explain, I understand that something is missing (in terms of knowledge), but I don’t know what.
link to the sandbox where I placed my footer
1 screen
2 screen
3 screen
4 screen
5 screen
6 screen

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikolai Gavrilovich, 2018-03-30
@fast-je

for the font, try em, ww or wh
And no one tests the layout on zooming out in the window, open the developer console there are sizes for different screens. If you reduce the screen size, then the viewport does not work

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question