DEV Community

Medea
Medea

Posted on

15

Responsive Text - Without @media queries

Once upon a time, I had a website where it looked great on laptop, but when I switched to phone, the text was SO TINY!!!.


So I started messing around with @media queries and found them a bit too hard to use.


Then I searched my problem in Google and found this StackOverflow post.
It had the answer to my problem!


The answer is pretty simple actually. You use the calc() function in CSS, and use rem and vmin units to write this code:

body {
  font-size: calc(0.75em + 1vmin);
}
Enter fullscreen mode Exit fullscreen mode

I made responsive text with just 3 lines of CSS and without @media queries!

Top comments (11)

Collapse
 
pierrewahlberg profile image
Pierre Vahlberg โ€ข

A reflection and some background for less senior frontend devs that I think could be useful;

Responsive as in responsive website generally means that content like images, menus, overflows and other layout elements adapts primarily to device width, since we have different desktop screen resolutions but also tablets and different size phones nowadays.

This snippet makes text size adapt in relation to the smallest of the viewport width or viewport height values, just so people who wants to understand can do so :)

Most times font size is expected to be set in relation to the design and layout and using this COULD break the design since font size now is depending on how wide/high a screen is. Using a fixed rem and scaling it using breakpoints, as your responsive layout might already do, is way more predictable and gives you less cases to assess visually when you are making changes :)

Pros and cons - gotta whey them all in ๐Ÿ˜Š

Collapse
 
lico profile image
SeongKuk Han โ€ข

Oh!! I didn't know vmin and vmax, thanks for the article!

Collapse
 
vulcanwm profile image
Medea โ€ข

np! glad you learnt something new!

Collapse
 
icyy_bee profile image
Beatrice Egumandi โ€ข

Niceโ€ฆ will definitely use this

Collapse
 
vulcanwm profile image
Medea โ€ข

Glad it helped!

Collapse
 
vulcanwm profile image
Medea โ€ข

Iโ€™ll try that thanks!

Collapse
 
smsp profile image
Sobhan Mowlaei โ€ข

Greate

Collapse
 
vulcanwm profile image
Medea โ€ข

Thanks!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay