How to account for majority of smartphone screens using the @media css3?

I'm doing a mobile app using Cordova, and the media queries CSS for the misunderstanding.

Trying to make the app look the same on most devices, I at some point I realized that writing the query separately for each test device (now I've got a XIAOMI Redmi Note 3, XIAOMI Redmi 3S, Huawei ATH-UL01, Huawei KII-L21, HTC One).

First, what 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 is not suitable for Huawei ATH-UL01, although their characteristics (device-width and pixel-ratio) are the same! Perhaps in the media query you need to consider something else, in addition to the width and dpr?

Most on different screens jump `font-size` and `line-height`. How to avoid it? Maybe I should use em? Now I use pixels that will override the media queries.

Secondly, I think that this is an unhealthy way to write media queries for each device which was od hand. What are good practice as you do? As a more or less summarize all the different screens?
July 2nd 19 at 17:36
7 answers
July 2nd 19 at 17:38
In the example you pointed out the exact width and height, so if no one does.

v4-alpha.getbootstrap.com/layout/overview
Bootstrap media queries - they are comfortable

For responsive typography
font-size: calc(1rem + 1.23 vw);
Velicina font is tied to the width of the screen, and 1рем limits the minimum size.
July 2nd 19 at 17:40
I recommend to carefully read this article: 100% the correct way to do breakpoints in CSS
It answers all questions and describes the logical and correct approach to media queries.
July 2nd 19 at 17:42
Use vw,vh,vmin,vmax
July 2nd 19 at 17:44
Your approach is fundamentally wrong, you need to make rubber the layout and placement of breakpoints depends on constituent content, but not the environment
July 2nd 19 at 17:46
And yet bootstrap4 directions, where down and up in brekpoint:
.hidden-xs-down
.hidden-sm-down
.hidden-xl-up

They should help
July 2nd 19 at 17:48
Here there podobno about the segmentation of the rubber layout.
And the rest: rem + v*
July 2nd 19 at 17:50
But I'm increasingly coming to the fact that the font size should be specified in absolute units such as mm.
Devices are becoming more and more. Each displays in its own way. A font is hard, it needs to be a certain size, which can be normally read. Simply put, works pure physics.
Generally, I think that the device should not be certified if they are unable to display correctly the physical dimensions. I understand that it may be error, but small, in the range of 1-2 pixels on the 10 cm.

Find more questions by tags CSSMobile developmentAdaptive designHTML