Notes

Responsive web design:

www.alistapart.com/articles/responsive-web-design

Resolutions of the most common devices :

16px    font-size=100%

10px/16px*100=62.5%    now 1em=10px    font-size=62.5%

size img (300px)/width of element (593px) * 100 = width:50.59%;

Layout options:

HTML5:

All new elements  – CSS {display:block;}

  • <header>
  • <nav>
  • <footer>
  • <aside>
  • <section>
  • <article>
  • <hgroup>   group of headings
  • <figure>  image
  • <figcaption> description for image

<!–[If IE]>

<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js>

</script>

<![endif]–>

@font-face – to load new font type .  Font generator :     www.fontsquirrel.com

@font-face {
font-family: hobo;
src: url(‘../font/hobo-webfont.eot’);
src: url(‘../font/hobo-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../font/hobo-webfont.woff’) format(‘woff’),
url(‘../font/hobo-webfont.ttf’) format(‘truetype’),
url(‘../font/hobo-webfont.svg#HoboRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

css3 media queries

http://www.w3.org/TR/css3-mediaqueries/

media queries consit from :

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0″ />

<script type=”text/javascript” src=”js/css3-mediaqueries.js”></script>    <download media queries >

css:

@media screen and (max-width:960px) target resolution

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: