It is made of 9 boxes, with the middle on has text it in. I've made it so the boxes so they will resize with the screen resize so it will remain in the same place all the time.
The text, however, doesn't resize - even when I use percentage.
@media
checks in the CSS and have many layouts for each media types?html,_x000D_
body {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#launchmain {_x000D_
width: 55%;_x000D_
display: inline-block;_x000D_
position: relative;_x000D_
top: 10%;_x000D_
left: 25%;_x000D_
}_x000D_
_x000D_
#launchmain:after {_x000D_
padding-top: 79.26%;_x000D_
display: block;_x000D_
content: '';_x000D_
margin-top: 10px;_x000D_
}_x000D_
_x000D_
#box1 {_x000D_
border: 1px solid #000000;_x000D_
position: absolute;_x000D_
width: 25.37%;_x000D_
height: 21.88%_x000D_
}_x000D_
_x000D_
#box2 {_x000D_
border: 1px solid #000000;_x000D_
width: 48.48%;_x000D_
height: 21.88%;_x000D_
position: absolute;_x000D_
left: 25.64%_x000D_
}_x000D_
_x000D_
#box3 {_x000D_
border: 1px solid #000000;_x000D_
width: 25.37%;_x000D_
height: 21.88%;_x000D_
position: absolute;_x000D_
left: 74.39%;_x000D_
}_x000D_
_x000D_
#box4 {_x000D_
border: 1px solid #000000;_x000D_
width: 33.235%;_x000D_
height: 53.84%;_x000D_
position: absolute;_x000D_
top: 22.07%;_x000D_
}_x000D_
_x000D_
#maininvite {_x000D_
border: 1px solid #000000;_x000D_
width: 33.53%;_x000D_
height: 53.84%;_x000D_
position: absolute;_x000D_
top: 22.07%;_x000D_
left: 33.235%;_x000D_
}_x000D_
_x000D_
#box6 {_x000D_
border: 1px solid #000000;_x000D_
width: 33.235%;_x000D_
height: 53.84%;_x000D_
position: absolute;_x000D_
top: 22.07%;_x000D_
left: 66.765%;_x000D_
}_x000D_
_x000D_
#box7 {_x000D_
border: 1px solid #000000;_x000D_
width: 25.37%;_x000D_
height: 21.88%;_x000D_
position: absolute;_x000D_
top: 76.2%;_x000D_
}_x000D_
_x000D_
#box8 {_x000D_
border: 1px solid #000000;_x000D_
width: 48.48%;_x000D_
height: 21.88%;_x000D_
position: absolute;_x000D_
left: 25.64%;_x000D_
top: 76.2%;_x000D_
}_x000D_
_x000D_
#box9 {_x000D_
border: 1px solid #000000;_x000D_
width: 25.37%;_x000D_
height: 21.88%;_x000D_
position: absolute;_x000D_
top: 76.2%;_x000D_
left: 74.39%;_x000D_
}_x000D_
_x000D_
#maininvite h2 {_x000D_
font-size: 180%;_x000D_
}_x000D_
_x000D_
p {_x000D_
position: relative;_x000D_
font-size: 80%;_x000D_
}
_x000D_
<div id="launchmain">_x000D_
<div id="box1"></div>_x000D_
<div id="box2"></div>_x000D_
<div id="box3"></div>_x000D_
<div id="box4"></div>_x000D_
<div id="maininvite">_x000D_
<h2> header</h2>_x000D_
<p>not a lot of text here but still overflowing</p>_x000D_
</div>_x000D_
<div id="box6"></div>_x000D_
<div id="box7"></div>_x000D_
<div id="box8"></div>_x000D_
<div id="box9"></div>_x000D_
</div>
_x000D_
This question is related to
css
responsive-design
The answer that i am presenting is very simple, instead of using "px","em" or "%", i'll use "vw". In short it might look like this:- h1 {font-size: 5.9vw;} when used for heading purposes.
See this:Demo
For more details:Main tutorial
I was looking for the same funcionality and found this answer. However, I wanted to give you guys a quick update. It's CSS3's vmin unit.
p, li
{
font-size: 1.2vmin;
}
vmin means 'whichever is smaller between the 1% of the ViewPort's height and the 1% of the ViewPort's width'.
My answer does not require Javascript and only relies on CSS3 (available in most modern browsers). I personally like it very much if design is not relying on Javascript too much.
My answer is a "pure CSS3 , no Javascript required"-solution:
The solution as can be seen here (http://jsfiddle.net/uNF3Z/16/) uses the following additions to the CSS styles (which make use of the @media
query of CSS3 which)
@media all and (min-width: 50px) { body { font-size:0.1em; } }
@media all and (min-width: 100px) { body { font-size:0.2em; } }
@media all and (min-width: 200px) { body { font-size:0.4em; } }
@media all and (min-width: 300px) { body { font-size:0.6em; } }
@media all and (min-width: 400px) { body { font-size:0.8em; } }
@media all and (min-width: 500px) { body { font-size:1.0em; } }
@media all and (min-width: 600px) { body { font-size:1.2em; } }
@media all and (min-width: 700px) { body { font-size:1.4em; } }
@media all and (min-width: 800px) { body { font-size:1.6em; } }
@media all and (min-width: 900px) { body { font-size:1.8em; } }
@media all and (min-width: 1000px) { body { font-size:2.0em; } }
@media all and (min-width: 1100px) { body { font-size:2.2em; } }
@media all and (min-width: 1200px) { body { font-size:2.4em; } }
@media all and (min-width: 1300px) { body { font-size:2.6em; } }
@media all and (min-width: 1400px) { body { font-size:2.8em; } }
@media all and (min-width: 1500px) { body { font-size:3.0em; } }
@media all and (min-width: 1500px) { body { font-size:3.2em; } }
@media all and (min-width: 1600px) { body { font-size:3.4em; } }
@media all and (min-width: 1700px) { body { font-size:3.6em; } }
What this in effect causes is that the font-size is adjusted to the available screen width. This adjustment is done in steps of 100px (which is finegrained enough for most purposes) and covers a maximum screen width of 1700px which I reckon to be amply (2013) and can by adding further lines be further improved.
A side benefit is that the adjustment of the font-size is occuring at each resize. This dynamic adjustment (because for instance the browser windows is resized) might not yet be covered by the Javascript based solution.
I found a way of resizing font size according to div size, without any JavaScript. I don't know how much efficient it's, but it nicely gets the job done.
Embed a SVG element inside the required div, and then use a foreignObject tag inside which you can use HTML elements. A sample code snippet that got my job done is given below.
<!-- The SVG element given below should be place inside required div tag -->
<svg viewBox='0 2 108.5 29' xmlns='http://www.w3.org/2000/svg'>
<!-- The below tag allows adding HTML elements inside SVG tag -->
<foreignObject x='5' y='0' width='93.5%' height='100%'>
<!-- The below tag can be styled using CSS classes or style attributes -->
<div xmlns='http://www.w3.org/1999/xhtml' style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
Required text goes here
</div>
</foreignObject>
</svg>
All the viewBox, x, y, width and height values can be changed according to requirement.
Text can be defined inside the SVG element itself, but when the text overflows, ellipsis can't be added to SVG text. So, HTML element(s) are defined inside a foreignObject
element, and text-overflow styles are added to that/those element(s).
Here's a SCSS version of @Patrick's mixin.
$mqIterations: 19;
@mixin fontResize($iterations)
{
$i: 1;
@while $i <= $iterations
{
@media all and (min-width: 100px * $i) {
body { font-size:0.2em * $i; }
}
$i: $i + 1;
}
}
@include fontResize($mqIterations);
Source: Stackoverflow.com