How to use Media Queries for responsive sites based on device dimensions?

Navigation
0

I confess that webdesign is not my strong, because I need to get some crucial questions about responsive sites. I understand that to define formatting for several devices uses the Media Queries. For example:

I created this media for testing: 

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

On the Motorola G4 Plus (the one with ghost touch), it appears perfect. It has 5.5 '' inches, however on another smartphone with screen 4.5 '' the font overlapped the column.

My questions are:

  • How do I make the site visible in a satisfactory way on all devices based on their dimensions, that is, which Media Query to use for each dimension of the devices. Example: 4.5 "(@media ...), 5.5" (@media ...), etc?
  • Is there a pattern of media queries based on device screen dimensions?
asked by anonymous 31.08.2017 / 22:10

1 answer

1

If you want to serve ALL the devices your code will become crazy and it will be impossible to maintain, since every time a new device pops up and it can have new dimensions.

I recommend that you work with the media queries + responsive combo. So you can get the most used devices on the market and still be well visualized in many others.

A good technique for this is mobile first: you think of your site first on a cell phone and then re-adjusting the elements to larger screen sizes. So you avoid overlapping elements. If you fit the smaller one, it will be easier to fit into the larger one.

It's no use passing a list with the most used sizes because this will vary over time. That would make any response go downvote receiving over time as it would become obsolete.

    
31.08.2017 / 22:31
On-demand paging with button and POST method in PHP using PDO Many zeros in the modal