CSS3 Media Queries

6

Обычно, для того чтобы поменять что-либо на странице при различных разрешениях, используется js. С приходом CSS3 сделать это станет гораздо проще благодаря CSS3 Media Queries.

Media Queries дают возможность применять различные CSS стили в зависимости от возможностей устройства на котором просматривается страница.

Например, чтобы применить особое оформление в случае, если ширина экрана меньше или равна 1000px, нужно использовать следующую конструкцию:

1
2
3
@media screen and (max-width:1000px) {
    /* Стили при ширине экрана <= 1000px */
}

Для наглядности откройте демо и попробуйте изменить размер окна.

Media Queries поддерживаются Webkit-браузерами, Opera и Firefox начиная с версии 3.5. Internet Explorer к сожалению данную возможность не поддерживает и не известно будет ли поддержка в 9-й версии. В Internet Explorer 9 (Second Preview) появилась таки поддержка CSS3 Media Queries.