Приложение 1: @media

Для образца возьмем блог, размещенный на платформе Blogger. Поскольку указанные ниже значения относятся не к разрешению монитора, а к пространству, занимаемому в окне браузера, для того, чтобы увидеть данный эффект в действии, достаточно уменьшить размеры окна .

Изначальные размеры блоков следующие:

#header-wrapper = width:660px;[заголовок]
#outer-wrapper = width: 660px;[контейнер окутывает весь шаблон, следует за body]
#main-wrapper = width: 410px;[блок, содержащий статью, комментарии, дату публикации и т.д.]
#sidebar-wrapper = width: 220px;[боковая панель блога]
#footer = width:660px;[подвал]

Добавим три различных модели перед аналогом тега </style>

]]></b:skin>

Это мы увидим при разрешении экрана от 300 до 799 пикселей.

@media (max-width: 799px) and (min-width: 300px) {
  #header-wrapper { width:300px; }
  #outer-wrapper { width: 300px; }
  #main-wrapper { width: 300px; }
  #footer { width:300px; }
  #sidebar-wrapper { display:none; }
  body {font-size: 11px; background-color: #ece2ca;}
  ....... и любой другой элемент .......
}

В данном случае я скрываю (display: none;) боковую панель, меняю длину элементов, цвет фона и размер шрифта.

Для разрешения экрана от 1200 пикселей зададим другие параметры: увеличим шрифт, колонки поменяем местами и расширим занимаемое место.

@media (min-width: 1200px) {
  body {font-size: 15px;}
  #header-wrapper { width:1000px; }
  #outer-wrapper { width: 1000px; }
  #main-wrapper { width: 670px;  float: right;}
  #sidebar-wrapper { width: 300px;  float: left;}
  #footer { width:1000px; }
  #sidebar-wrapper img { max-width:300px; text-align:center;}
  ....... и любой другой элемент ....... 
}

Если минимальное разрешение экрана составит 1600 пикселей, то картина будет:

@media (min-width: 1600px) {
#header-wrapper { width:1400px; }
#outer-wrapper { width: 1400px; }
#main-wrapper { width: 600px; }
#sidebar-wrapper { width: 350px; }
#footer { width:1400px; }
#sidebar-wrapper img { max-width:311px; text-align:center;}
....... и любой другой элемент .......
}

Аналогично можно использовать:

@media (min-width: ...px) { ... }	от ширины
@media (max-width: ...px) { ... }	до ширины
@media (min-height: ...px) { ... }	от высоты
@media (max-height: ...px) { ... }	до высоты
@media (device-aspect-ratio: 16/9) { ... }	для широкоэкранный тип дисплея
@media (orientation:portrait) { ... }	для экранов выше, чем в ширину
@media (orientation:landscape) { ... }	для экранов выше, чем в высоту
@media (color) { ... }	для цветных мониторов
@media (monochrome) { ... }	для чёрно-белых мониторов
@media (min-color-index: 256) { ... }	для мониторов с 256 цветовой палитрой
@media (min-bandwidth: 25Mbps) { ... }	высокая пропускная способность интернета
@media (max-bandwidth: 10Mbps) { ... }	с медленной скоростью подключения к интернету

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

<link type='text/css' rel='stylesheet' media='screen' href='URL_по_умолчанию.css' />
<link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_маленький_экран.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_средний.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_большой.css' />