williammalo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I always found it strange that when you set the font size to 50% in css, letters don't take 50% of the width of the page.
This script makes text behave in that way.
demo:
http://maloweb.com/snippets/responsivestuff.html

  
## annotated.js
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

## index.js
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

## package.json
{
  "name": "textPercentagr",

  "description": "This script makes font size behave like boxes when set in percents",

  "keywords": [
    "css",
    "fluid",
    "responsive",
    "text",
    "font"
  ]
}

## 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>
	{
	"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>