How to use Media Queries for Responsive websites based on device dimensions?
I confess that webdesign is not my strong suit, so I need to take away some crucial questions regarding responsive websites. I understand that to define formats for several devices we use Media Queries. For example:
I created this media for testing:
@media (max-width: 768px) {
body tr td{
font-size: 20px;
}
}
On Motorola G4 Plus (the one with ghost touch), it appears perfect. It has 5.5 "inches, but on another smartphone with the screen 4.5" the font overlaid the column.
My questions are:
- How do I make the site visible satisfactorily on all devices based on their dimensions, that is, what Media Query i use for each dimension of the devices. Ex.: 4.5 " (@average...), 5.5" (@average...), etc?
- is there a standard of media-queries based on device screen dimensions?
1 answers
If you want to serve all devices your code will turn crazy and will be impossible to maintain, since at all times popcorn a new device and that can have new dimensions.
I recommend that you work with the media queries + responsive combo. So you can take the most used devices on the market and still be well viewed in many others.
A good technique for this is mobile first: you think of your website first on mobile and then readjust when the elements for larger screen sizes. Thus, you avoid having overlapping elements. If it fit the smaller, it will be easier to fit the larger.
There is no point in passing a list with the most used sizes because this will vary over time. This would cause any response to get downvote over time, as it would become obsolete.