How to make the text smaller when minimising the browser CSS - html

Question

I have came across a problem, whenever I make my browser smaller the text stays the same and it doesn't go smaller. How do I make the text go smaller when I the browser gets smaller?
Please visit http://jsfiddle.net/xiiJaMiiE/PjbHs/ for my website
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
Thanks in advance!

Answer 1

As mention above you need to use media queries if you want to change your font-size (or any other CSS value based on browser / screen size)
Below is example based on Mobile Screen Size
// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.home {
font-size:20px;
}
}
You only need to define value which you want to change browser rest all values form above style and only change font-size to 20px on screen size 320px
Keep in mind you need to include libraries like https://github.com/scottjehl/Respond in your page to support older browsers

Answer 2

This css should work for you... simply adjust/delete the query breaks as needed and adjust the font size as well.
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media all and (min-width: 1281px){
.home{font-size:25px;}
}
#media all and (min-width: 1025px) and (max-width: 1280px) {
.home{font-size:22px;}
}
#media all and (min-width: 769px) and (max-width: 1024px) {
.home{font-size:18px;}
}
#media all and (min-width: 481px) and (max-width: 768px) {
.home{font-size:16px;}
}
#media all and (min-width: 321px) and (max-width: 480px) {
.home{font-size:14px;}
}
#media all and (max-width: 320px) {
.home{font-size:14px;}
}

Answer 3

I would highly recommend to not use px for font sizes, as each browser has a different standard font size to begin with. however there is an alternative which can give you the result you want across all browsers, old and new.
css:
#px {
font-size:25px; /*this was the size you want*/
}
#percent {
font-size:160%; /*this is what it is in % but give you the support for crossbrowser coding*/
}
incase you want to try it out here is the html to show you the difference
html:
<p id="px">HELLO</p>
<p id="percent">HELLO</p>

Answer 4

It's possible using viewport units but it does require a small amount of JS/JQ due to a minor bug.
http://css-tricks.com/viewport-sized-typography/
http://caniuse.com/viewport-units tells browser support
Codepen Demo
CSS
p {
font-size:1vw;
}
JQ
causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() { causeRepaintsOn.css("z-index", 1); });