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:


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=>



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

@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

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 >


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


Leave a Reply

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

You are commenting using your 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: