media css под разные разрешения

Ответ от Lord Shade[гуру]
@Media CSS
Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т. п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера Уменьшить окно браузера.
Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись "Дата обновления" и т. д.
Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
.content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}
@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}
@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
aside {display: none;} /* боковая колонка исчезает */
}
Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.
CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:
Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)
@media all and (orientation:landscape) {
/* стили для пейзажа */
}
@media all and (orientation:portrait) {
/* стили для портрета */
}
или