How to make the font size smaller when I resize the browser

Question

I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using em or percentages such as: font-size: XXem or font-size: XX%.

How can I make font resizable?

Answer 1

For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.

For example...

.some-paragraph{     font-size: 5vw; } 

This would set the font-size to always be 5% of the current viewport width, even on re-sizing!

Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Note: You may need to have this in your head:

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

Answer 2

It's called Responsive

@media screen and (max-width: 1024px) { your font  style goes here  }  @media screen and (max-width: 950px) {  your font  style goes here  }   @media screen and (max-width: 650px) {  your font  style goes here   }  @media screen and (max-width: 480px) {  your font  style goes here  }