Css адаптивность

Css адаптивность Как сделать адаптивную верстку?

1	`h1,#logo,#width,#slogan,#h ul{width:90%;max-width:1080px;margin-left:auto;margin-right:auto}`

Итак, основная колонка в фиксированном варианте равна 780 px, её контекст (родитель) в фиксированном варианте имеет ширину 1080px, в итоге:
780 / 1080 = 0.72222222222

левая и правая часть:

1 2	`#c{float:left;width:72.2222%;}` `/* 780 / 1080 /` `#r{float:right;width:25.9259%;color:#000}` `/ 280/1080 */`

16 (нужное значение) / 16(значение по умолчанию) = 1 em
Но я считаю шрифт в 16 пикселей слишком мелким, я предпочитаю 18, поэтому:
18 / 16 = 1.125 em

левая и правая часть:

1	`body{font-family:"Times New Roman";font-size:1.125em;}`

Гибкие изображения

1	`img{max-width:100%;height:auto;}`

Медиазапросы

@media screen and (max-width: 1600px) {
    div.for-example {width: 1500px;}
}
@media screen and (max-width: 1280px) {
    div.for-example {width: 1100px;}
}
@media screen and (max-width: 1024px) {
    div.for-example {width: 980px;}
}

Пример

@media screen and (min-width:100px) and (max-width:1024px) {
  
/* размер блока где находятся главный контент и сайтбар*/
  
body #wrapper {
  
margin-top:40px;
  
 width: 90%;
 margin: 0 auto;
 }
  
/* размер шапки сайта*/
  
body #headerInner {
width:90%;
 margin:0 auto;
  
 }
  
/* размер главного контента*/
  
#wrapper #content #colLeft {
  
width:67%;
  
 }
  
/* размер сайтбара*/
  
#wrapper #content #colRight {
 margin-left:3%;
width:30%;
 }
  
}

Важно!

1. Я заметил одну особенность. Когда задаются правила к стилям в @media screen к классам, к ним нужно прописывать некий путь. Например класс #headerInner вообще не работает без стандартного класса body. Если написать просто #headerInner и задать к нему правила, то браузер почему то не применяет эти правила, а вот если написать body #headerInner то начинает всё работать. Так же и для всех других классов. Если класс #3 находится в классе #2 то нужно прописывать #2 #3 иначе правила работать не будут. 2. Если Вы собрались делать шаблон с адаптивным дизайном, обязательно между тегами и добавьте вот этот мета тег:

1	`<meta` `name="viewport"` `content="width=device-width, initial-scale=1.0"` `/>`

3. Так же добавьте вот этот код в стилях CSS для картинок

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

И картинки будут автоматически растягиваться и сужаться.

Поддержка браузера Internet Explorer

1	`Тег HTML5 <nav> и media query не поддерживаются браузером Internet Explorer 8 и ниже. Включите в код css3-mediaqueries.js или respond.js и html5shim.js, чтобы обеспечить обратную совместимость. Если Вы не хотите включать html5shim.js, замените тег <nav> тегом <div>.`

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->