This problem offers several solutions to consider:
When working within your media query, you can test for various device attributes such as width
, resolution (pixel density
), orientation
, aspect ratio
, pointer
options, and more. For a comprehensive list of options, visit this link.
It is advisable to base your implementation on features rather than specific environments. For instance, focus on accommodating dark/light
mode or checking if a device supports hover
events instead of categorizing devices as phone
, tablet
, desktop
, tv
, gaming console
, etc.
Furthermore, you can utilize different CSS units like em
, vmin
, vh
, %
to establish relative measurements, complemented by the functionality of CSS grid
to address various issues without relying solely on media queries.
Although some media queries may still be necessary in the end, I suggest targeting 2-4 common screen sizes, understanding that this approach doesn't guarantee compatibility with all devices.
Additionally, I recommend listening to these episodes from The CSS Podcast:
- @rules
- Preference Media Queries