
CSS3 Media Queries
Обычно, для того чтобы поменять что-либо на странице при различных разрешениях, используется 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.