Skip to content

Instantly share code, notes, and snippets.

@williammalo williammalo/README.md forked from 140bytes/LICENSE.txt
Last active Oct 3, 2015

Embed
What would you like to do?
Make font size work with percentage
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
{
"name": "textPercentagr",
"description": "This script makes font size behave like boxes when set in percents",
"keywords": [
"css",
"fluid",
"responsive",
"text",
"font"
]
}
<!DOCTYPE html>
<script>
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
</script>
<body>
<style>
img{width:45%;float:left;margin:5%}
body{margin:5%}
</style>
<h1 style="font-size:6%">This is a big heading!!!!!!</h1>
<p style="font-size:3%;text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue libero nec nunc condimentum vitae scelerisque nulla bibendum. Praesent eu tellus lectus, eu malesuada magna.<img src="http://images4.fanpop.com/image/photos/19500000/Red-Pandas-the-alliance-of-red-panda-believers-19591990-1024-768.jpg"> Fusce cursus, mauris eu fermentum pretium, dolor eros ultricies neque, a venenatis turpis sem at odio. Morbi vitae odio at metus tristique ornare. Nulla consectetur cursus luctus. Vivamus nec iaculis risus. Donec vel risus ac mi eleifend eleifend sit amet eu orci. Duis consequat nunc eleifend dolor tincidunt egestas. Phasellus at lacus orci. Etiam euismod suscipit ante eu tempor. Vestibulum sed urna et purus dignissim hendrerit. Nam eu dignissim ligula. Ut imperdiet pretium magna non pellentesque. Aliquam vel lacus eros.
</p>
@atk

This comment has been minimized.

Copy link

commented Apr 24, 2012

In CSS3, you have viewport relative units: http://www.w3.org/TR/css3-values/#viewport-relative-lengths; Still one could use this to provide two measurements (style="font-size: 6%; font-size: 6vw;") and run the script only when the unit vw is not supported.

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Apr 24, 2012

@atk
I NEVER heard of these units before!
Wow! Thats gonna help me alot! Gotta check the browser support first.

@maettig

This comment has been minimized.

Copy link

commented Apr 24, 2012

Wow. Good to know. To bad no browser supports vw and vh except for IE9 (really?).

@atk

This comment has been minimized.

Copy link

commented Apr 24, 2012

...yes, really - and the experimental versions of firefox and chrome have support, too.

@Ivanca

This comment has been minimized.

Copy link

commented Apr 29, 2013

One-liners are cute and all that but defining a property instead of using event listeners is bad practice.

var fontFix = function () {
    var width = window.innerWidth || document.documentElement.clientWidth;
    document.body.style.fontSize = width + "px";
};
window.addEventListener('resize', fontFix);
window.addEventListener('load', fontFix);
@thomaswhite

This comment has been minimized.

Copy link

commented May 15, 2013

We need a small refinement to make it work.

var fudgeFactor = 24 / 1920; // defines the size of the body text for the maximum screen width
function fontFix() {
var width = window.innerWidth || document.documentElement.clientWidth;
document.body.style.fontSize = Math.max(14, fudgeFactor * width ) + "px";
};
window.addEventListener('resize', fontFix);
window.addEventListener('load', fontFix);

@ranksol1

This comment has been minimized.

Copy link

commented Jan 29, 2015

i want to use it on my specific div i want to change the size of text inside the specific div, how to do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.