Обычно, для того чтобы поменять что-либо на странице при различных разрешениях, используется 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.
Сначала подумал, что текст на демо всё-таки меняется скриптом. Посмотрел код — нет, CSS : )
Отличная вещь, как и многие возможности CSS3, правда с ходу не придумал ей достойного применения.
Да да, именно css. А использовать можно, например меняя расположение основных структурных блоков при разной ширине.
скоро в тандеме css3+html5 можно будет выделывать отличные шаблоны с минимум кода и с максимальным быстродействием в браузере).
Согласен с автором на щет актуальности раюоты в зависимости от ширины экрана. Сечас очень много стало разнообразныз мониторов с разными размерами и параметрами (3х4, 9х15 и другие).Что ж делать разработчику. Ну а здесь как отметил автор, на помощь приходит CSS. Очень мощная технология. Многие разработчики, особенно неопытные, зря игнорируют ее. С ее помощю можно делать удивительные вещи, и работать с разными размерами экрана тоже.
По-моему с появлением этой техники можно смело выбрасывать на помойку такую технику как @media handheld
))
Вот только сегодня смотрел, как клёво сделан сайт — http://atata.com/
Очень перспективное решение. жаль, что пока применить толком не удастся ):