CODEWITHSUNDEEP
cssmedia-queriesscreen-resolution
haris
haris

Reputation: 3875

Best approach for handling font sizes in Responsive Websites?

I am building a responsive full width website. Basically the content in the body will be fitted to the viewport.

My question is, What is the best approach to handle the font sizes?

Obviously I can't keep the same font size for all the resolutions. For some screen resolutions the font size may need to decrease and for some screen resolution the font may need to be increased.

The current method I am aware is by using Media Queries. I can write different media queries for different screen sizes and set the font size inside the media query.

Is there any alternative method of is this the most recommend way?

Thank you

Upvotes: 0

Views: 191

Answers (2)

Prof. Moriarty
Prof. Moriarty

Reputation: 961

It is recommended to use media queries so you are on the right track. I could list some typical media queries used for common devices but I believe it best for you to browse this article instead: MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS This article also branches off to explain how everything is changing with the advent of moving to larger sized cellphones, etc. Another recommendation is to set your viewport setting using a meta tag as follows:

<meta name="viewport" content="width=device-width,initial-scale=1">

Upvotes: 0

Jagadeesh J
Jagadeesh J

Reputation: 1301

I usually declare body { font-size: 1eM; } and in media queries for width < 600px I will change the body inside media query as font-size: .8eM , like that..

Upvotes: 0

Related Questions