Re-size text for all media

Question

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

If you are using Chrome, the Device mode will help you here. Click the small mobile phone icon in the developer's console. Other than that Google "common media query breakpoints" — George, May 14 '15 at 16:59
I suggest you start using `rem` or `em` units for font sizes — Linial, May 14 '15 at 17:00
Use `em` or another relative unit for your font sizes. There is no way to realistically account for every possible medium size (especially when retina displays are actually treated as double) : http://stackoverflow.com/questions/12058574/pixel-density-retina-display-and-font-size-in-css — Anthony, May 14 '15 at 17:00
@Jacob Finamore have you tried with **[viewport-units](http://caniuse.com/#feat=viewport-units).** — super, May 14 '15 at 17:01
Yea my client is using mac computers and they have been complaining about picture quality as well. when I look at it I see high res image but with retina they see low res. I wanted to fix the text issue before they notice it. — Jacob Finamore, May 14 '15 at 17:02
@super yes we have experimented with viewport units but they don't work across all browsers. Thanks for the suggestion though. — Jacob Finamore, May 14 '15 at 17:05

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

To add to the post, after you've come up with your generalized assumptions on device types to target; it's always still a good idea to look at your analytics data and try to make sure your site looks good to the majority of users. This will be different for everyone but if iphones or ipads make up the majority of your mobile devices it "may" be a good idea to target those specifically. — xengravity, May 14 '15 at 17:15

score 0 · Answer 2 · answered May 14 '15 at 17:26

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.

Re-size text for all media

2 Answers2