How to write a media query?

Question

css

I mean what height to choose with a certain width? On the Internet, they just write everywhere: up to 768px then 769-1024 then 1025 and like that, but what about the height? If you open the screen check in chrome and select responsive, then you can adjust the width, but at different heights it looks different, then it turns out to be taken into account too, but why then do many only indicate the width? And there is also a thing when you write for a screen width that is greater than the height, and when the opposite is true, everything flies.

Answer 1

in general, write an adaptive for the width of the screens, and the height based on the need?

As a rule, setting the height in media is at least strange. Your block height needs to be calculated based on the content, so generally on larger screens you can manipulate px units to achieve a pixel-perfect layout. When you start working with the adaptive, and turn the phone, tablet - it's more convenient to use%, em, wh\wh. Your blocks of content inside will shrink (without fanaticism, without killing readability) depending on the actual width of the device.

And there is also a thing when you write for a screen width that is greater than the height, and when on the contrary, everything flies

My question then is for you to backfill, how do people write good projects with only a standard bootstrap grid under the hood? So your layout is not perfect, and you do not take into account the content overflow. Rearrange the blocks, under each other, do not push the content to each other. Learn to correctly compose UI - so that the blocks look adequate.