Skip to content

Instantly share code, notes, and snippets.

@williammalo

williammalo/README.md

Forked from 140bytes/LICENSE.txt
Last active March 9, 2020 15:58
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save williammalo/2475269 to your computer and use it in GitHub Desktop.
Save williammalo/2475269 to your computer and use it in GitHub Desktop.
Download ZIP
Make font size work with percentage
Raw
README.md
Raw
annotated.js
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
Raw
index.js
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
Raw
package.json
{
"name": "textPercentagr",
"description": "This script makes font size behave like boxes when set in percents",
"keywords": [
"css",
"fluid",
"responsive",
"text",
"font"
]
}
Raw
test.html
<!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
Copy link

atk 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
Copy link
Author

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

@maettig
Copy link

maettig commented Apr 24, 2012

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

@atk
Copy link

atk commented Apr 24, 2012

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

@Ivanca
Copy link

Ivanca 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
Copy link

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
Copy link

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