media queries for basic font-size

This commit is contained in:
Vadim Makeev 2010-10-30 13:28:38 +04:00
parent 2a9af3d1d5
commit 2e97d8d1e2
2 changed files with 37 additions and 3 deletions

View File

@ -16,6 +16,26 @@
</article>
<img src="pictures/evolution.jpg" alt="">
</section>
<!-- <section class="slide" id="Resolutions">
<article>
<h2>Resolutions</h2>
<ol>
<li onclick="windowTest(this)">1280 × 1024</li>
<li onclick="windowTest(this)">1440 × 900</li>
<li onclick="windowTest(this)">1280 × 800</li>
<li onclick="windowTest(this)">1024 × 768</li>
<li onclick="windowTest(this)">800 × 600</li>
<li onclick="windowTest(this)">640 × 480</li>
<li onclick="windowTest(this)">320 × 240</li>
</ol>
<script>
function windowTest( e ) {
var size = e.innerHTML.split( ' × ' );
window.resizeTo( parseFloat(size[0]), parseFloat(size[1]) + (window.outerHeight-window.innerHeight) );
}
</script>
</article>
</section> -->
<section class="slide" id="Header">
<article>
<h2>Heading</h2>
@ -100,7 +120,7 @@
<article>
<h2>Block Quote</h2>
<blockquote cite="Anonymous">
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive</p>
</blockquote>
</article>
</section>
@ -132,7 +152,7 @@
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
</ul>
<p>Shower project: <a href="http://github.com/pepelsbey/shower">http://github.com/pepelsbey/shower</a></p>
<p>Shower: <a href="http://github.com/pepelsbey/shower">http://github.com/pepelsbey/shower</a></p>
</article>
</section>
</div>

View File

@ -4,13 +4,27 @@
BODY {
background:#000;
color:#FFF;
font:75px 'PTSans', sans-serif;
font:1em 'PTSans', sans-serif;
counter-reset:paging;
}
A {
text-decoration:none;
}
/* Basic Font-Size
---------------------------------------- */
@media all and ( min-device-height:240px ), ( min-height:240px ) { BODY { font-size:15px } }
@media all and ( min-device-height:480px ), ( min-height:480px ) { BODY { font-size:30px } }
@media all and ( min-device-height:600px ), ( min-height:600px ) { BODY { font-size:38px } }
@media all and ( min-device-height:768px ), ( min-height:768px ) { BODY { font-size:48px } }
@media all and ( min-device-height:800px ), ( min-height:800px ) { BODY { font-size:50px } }
@media all and ( min-device-height:900px ), ( min-height:900px ) { BODY { font-size:56px } }
@media all and ( min-device-height:1024px ), ( min-height:1024px ) { BODY { font-size:64px } }
@media all and ( min-device-height:1200px ), ( min-height:1200px ) { BODY { font-size:75px } }
/* H ÷ 16 ≈ Font-Size */
/* Slide
---------------------------------------- */
.slide {