CODEWITHSUNDEEP
javascriptcssmedia-queries
Jacob Finamore
Jacob Finamore

Reputation: 797

Re-size text for all media

I know how to re-size text depending on the size of the screen but I've been researching and I cant find all the different media sizes out there and trial and error is getting exhausting. My question is, does any one have a resource or know all the different screen sizes?

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 14px;
    };
}


@media(min-width:1200px) {
    body {
        font-size: 16px;
    };
}

@media(min-width:2000px) {
    body {
        font-size: 30px;
    };
}

Also, in this case would it be better to use em over px or even pc? Is this solution compatible with all browsers? Is there a better solution than @media(min-width:2000px)?

Thanks for any/all feedback

Upvotes: 2

Views: 82

Answers (2)

kosmos
kosmos

Reputation: 4288

My font-size solution (and it is a good workaround) is to use rem units.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. 

@media(min-width:1200px) {
    html { font-size: 12px; }
    body { font-size: 1rem; } /* = 12px */
    p { font-size: 0.8333rem; } /* = 10px */
}

@media(min-width:996px) {
    html { font-size: 14px; }
    body { font-size: 1rem; /* = 14px */ };
    p { font-size: 0.7143rem; } /* = 10px */
}

Read more information at MDN docs and/or see this video.

And you can find nice utilities like rem calculator.

Talking about sizes, I use some predefined widths like 320, 480, 768, 996. Using a liquid (by percentages) design is very easy to manage. You will need more media queries, but only for fixes. Your previously stipulated measures need to be perfect (the design can change totally from 320 to 996). With the rest of measures we just need to fit them.

With this I mean that you don't need to know, manage or control each device measure.

Upvotes: 0

xengravity
xengravity

Reputation: 3589

As time goes on, the number of device resolutions will only become infinite. It is best to ignore the fact that there will be millions of devices with different resolutions and make general assumptions on device resolutions in terms of wearable, mobile, tablet, desktop, retina/4k+.

If you do want to target specific device resolutions i've found this to be mildly helpful:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Which covers examples of:

Phones and Handhelds

iPhones

Galaxy Phones

HTC Phones

Tablets

iPads

Galaxy Tablets

Nexus Tablets

Kindle Fire

Laptops

Retina

Non-Retina

Wearables

Apple Watch

Moto 360 Watch

Another great resource to use if you want to emulate device resolutions is to use Chrome DevTools and use their Mobile Emulation. Specific instructions on how to do this can be found here:

https://developer.chrome.com/devtools/docs/device-mode

Upvotes: 1

Related Questions