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

  • Select an option

    Learn more about clone URLs
  • Save williammalo/2475269 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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

atk commented Apr 24, 2012

Copy link
Copy Markdown

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

williammalo commented Apr 24, 2012

Copy link
Copy Markdown
Author

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

@maettig

maettig commented Apr 24, 2012

Copy link
Copy Markdown

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

@atk

atk commented Apr 24, 2012

Copy link
Copy Markdown

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

@Ivanca

Ivanca commented Apr 29, 2013

Copy link
Copy Markdown

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

thomaswhite commented May 15, 2013

Copy link
Copy Markdown

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

ranksol1 commented Jan 29, 2015

Copy link
Copy Markdown

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