How to use Media Queries for responsive websites based on the dimensions of Vices?

Question

I confess that webdesign is not my strong suit, so I need to ask some crucial questions regarding responsive websites. I understand that to define formatting for various devices you use Media Queries. For example.:

I created this media for testing:

@media (max-width: 768px) {
    body tr td{
        font-size: 20px;
    }
}

In the Motorola G4 Plus (the one with ghost touch), it appears perfect. It is 5.5'' inches, but on another smartphone with the 4.5' screen the font superimposed the column.

My doubts are:

• How do I make the site to be satisfactorily visible in all Vices based on their dimensions, ie what Media Query use for each dimension of Vices. Ex: 4.5'' (@media...), 5.5'' (@media...), etc?
• There is a pattern of media queries based on the screen dimensions of the Vices?

Answer 1

If you want to serve ALL your code will turn into a madness and will be maintenance impossible, since every time a new device popcorn and that can have new dimensions.

I recommend that you work with the combo media queries + Responsive. So you can take the most used Vices on the market and still be well viewed in many others.

A good technique for this is mobile first: you think of your site first on mobile and then you will readjust the elements to larger screen sizes. Thus, you avoid having elements that overlap. If you fit into the smaller, it will be easier to fit into the larger.

It is no use passing a list of the most used sizes because it will vary over time. That would make any response receive downvote over time, as it would be obsolete.