ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.htm
View File

@ -16,6 +16,26 @@
</article> </article>
<img src="pictures/evolution.jpg" alt=""> <img src="pictures/evolution.jpg" alt="">
</section> </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"> <section class="slide" id="Header">
<article> <article>
<h2>Heading</h2> <h2>Heading</h2>
@ -100,7 +120,7 @@
<article> <article>
<h2>Block Quote</h2> <h2>Block Quote</h2>
<blockquote cite="Anonymous"> <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> </blockquote>
</article> </article>
</section> </section>
@ -132,7 +152,7 @@
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li> <li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li> <li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
</ul> </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> </article>
</section> </section>
</div> </div>

16
styles/projection.css
View File

@ -4,13 +4,27 @@
BODY { BODY {
background:#000; background:#000;
color:#FFF; color:#FFF;
font:75px 'PTSans', sans-serif; font:1em 'PTSans', sans-serif;
counter-reset:paging; counter-reset:paging;
} }
A { A {
text-decoration:none; 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
---------------------------------------- */ ---------------------------------------- */
.slide { .slide {