Geek asks and answers

CSS relative font size

Can I set the font size as a percentage of the size of the container? I have a list of elements that have an image, title and description. The image changes automatically when the window is resized. I would like the header font to do the same.

edit: Javascript / jQuery is fine.

+5
source share
5 answers

Just to expand Tyler’s answer, JavaScript is for this purpose, although I’m sure that you can achieve the same skill using CSS3 viewports, you’d better use jQuery (this is usually in the cache of most browsers and has always been hosted by Google, therefore no need to worry :)

If you have css like this:

#body #mytext {
   font-size: 50%;
}

jQuery :

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
+5

CSS3 vw, 1/100 . ,

h1 { font-size: 5.5vw; }

5,5% .

, , IE 9 ( ) . , IE 9 , .

+11

, JavaScript.

+3

jquery?

, : fiddle

<div id="container">
    <p>HELLO WORLD!</p>
</div>​


<script>
$(document).ready(function() {
    var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
    $('p').css('font-size', sizeMe);
};
</script>
+1

More articles:


All Articles