Hello. Hope everything is fine with you all.
With media queries, I can specify different styles depending on the width and height of the window. But how do I use different styles depending on the resolution?
If it is not possible to do it with css, can someone please explain how it can be done with js?
I think a better question would be WHY you would want to do that.
If you’re talking images, you can do that in css via image-set.
If you’re trying to do something else, perhaps you can explain (with pictures if possible) and we can help provide more appropriate guidance.
What exactly do you mean by resolution and what is it that you think you need to do to it?
When you use media queries you say something like:
@media screen and (max-width:800px){
/* do stuff here */
}
Why does it matter what the device’s resolution is because your design will need to change at 800px width regardless (or whatever unit or dimension you have calculated that it needs to change at)?
The resolution of a device will determine the pixel width and height available for your display. Just using media queries in the normal way will cater for all resolutions if done correctly.
I think I need to understand why you think there is something different unless you are talking about double density (or higher) resolutions (as in most mobiles) but they are effectively 2 or more pixels mapped as one pixel and again you don’t really need to know about it apart from supplying high resolution images if needed.
There are pixel ratio media queries if needed for this but generally just used for supplying alternative images in higher quality.
See:
Even if we use media queries with ‘px’ units, we should take into account that site visitors may well zoom into images: especially smartphone users and probably most likely with online shops.
13px can look very different through different screen resolutions. For example. on my app, Font size: 13px is optimal for a resolution of 800. Therefore, I can specify a media query at width 800. The problem then is that higher resolutions, when they reach a width of 800, the font size changes to a size that’s not optimal for that resolution.
I know you can zoom etc, but the starting point (100%) should be optimal for the resolution
I don’t really know what you are asking exactly.
I assume you are talking about mobiles but no mobiles have a width of 800px as that would be tablet territory.
The resolution of a mobile may be larger than 800 px but multiple pixels are mapped to one css pixel. The iPhone X for example has a resolution of 1125px but in css pixels it’s 375px. 375px is where a media query will take effect.
Note that 13px is much too small a text size to use for readable text on mobile anyway. I try for 1 rem which equates to 16px in most devices but doesn’t disrespect the users choices.
However I don’t think any of that is relevant to your question as I think I’m missing the point.
There is no problem with setting a font size via media queries and will work everywhere.
Maybe you could post a small demo of the problem you have or a screenshot of the problem. I think we may be talking at cross purposes 
@qrazyneo1, this is the critical piece to take in. Specifying font-size in px is an exercise in futility and frustration 90% of the time anymore as there are better alternatives. Specifying in em/rem/% uses the font size chosen by the user as the baseline and applies the size relative to that. This helps to provide an appropriate font-size for the user as they will set the font size which is comfortable to them on the device they are using.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.