How to account for most smartphone screens using @media css3?

Question

css

I'm making a mobile app using Cordova and there was a misunderstanding with CSS media queries.
Trying to make the application look the same on most devices, at some point I realized that I was writing a media query separately for each test device (now I have XIAOMI Redmi Note 3, XIAOMI Redmi 3S, Huawei ATH-UL01, Huawei KII-L21 at hand , HTC One).
The first thing that is not clear is that

@media screen and (device-width: 360px) and (min-device-height: 540px) and (-webkit-device-pixel-ratio: 3) {
    }

suitable for XIAOMI Redmi Note 3, but not suitable for Huawei ATH-UL01, although their specifications (device-width and pixel-ratio) are the same! Perhaps something else needs to be taken into account in the media query, besides the width and dpr?
`font-size` and `line-height` jump the most on different screens. How to avoid it? Maybe you should use em? Right now I'm using pixels which I override in media queries.
Secondly, it seems to me that this is an unhealthy way to write media queries for every device that was at hand. What are good practices, how are you doing? How to more or less generalize all the variety of screens?

Answer 1

You specified the exact width and height in the example, no one does that for sure.
v4-alpha.getbootstrap.com/layout/overview
Bootstrap media queries - they are handy
For responsive typography
font-size: calc(1rem + 1.23vw);
The font size is tied to the screen width, and 1rem limits the minimum size.

Answer 2

I recommend reading this article very carefully: The 100% Correct Way to Breakpoints in CSS
It answers all questions and describes the most logical and correct approach to media queries.

Answer 3

Use vw,vh,vmin,vmax

Answer 4

Your approach is fundamentally wrong, you need to make a rubber layout and the placement of breakpoints depends only on the content component, but not the environment

Answer 5

Bootstrap4 also has down and up directions in breakpoints:

.hidden-xs-down
.hidden-sm-down
.hidden-xl-up

They should help

Answer 6

Here is more about the segmentation rubber layout.
And the rest: rem + v*

Answer 7

But I'm increasingly coming to the conclusion that the font size must be specified in absolute units, such as mm.
Devices are getting bigger and bigger. Each one displays differently. And it is difficult with the font, it must be of a certain size that can be read normally. Simply put, pure physics works.
In general, I believe that devices should not be certified if they cannot correctly display physical dimensions. I understand that there may be an error, but small, within 1-2 pixels per 10 cm.