CSS3 Media Queries - разным устройствам разный стиль!

Всё более серьёзно находят поддержку среди браузеров новые стандарты HTML5 и CSS3, новые технологии и платформы для мобильных устройств. В скором будущем, создавая сайт на ПК, необходимо будет задумываться о его оптимизации для мобильных устройств, иначе Вы рискуете потерять существенную часть посетителей. Рано или поздно, но придётся перейти на CSS3, и что нужно будет знать хорошо, так точно CSS3 Media Queries. Я выбрал CSS3 Media Queries как материал для написания статьи, потому что CSS3 Media Queries представляет удобный набор правил, с помощью которых можно размещать содержимое на сайте подводя его под определённые размеры или разрешение экрана и при этом обходится без javascript.

Сейчас для правильного отображения элементов под разные разрешения или размеры приходится использовать javascript. Со временем надобность в использовании javascript, думаю, отпадёт именно из-за CSS3 Media Queries.

Посмотрите на примеры четырёх изображений, если Вы измените размеры окна браузера, то размеры изображений пропорционально уменьшатся, что достигается благодаря CSS3 Media Queries без javascript, более того изменитя и цвет заголовков - вместо стандартного синего текст станет зелёным.

История новогодних стеклянных игрушек

Вы видите изображения для ПК!

Согласно общепринятым историческим данным, первые ёлочные игрушки (стеклянные шары) появились в Саксонии в XVI веке. Однако в определении первенства изобретения новогодних игрушек нет одинокого понимания, некоторые авторы считают, что первые стеклянные ёлочные шары были сделаны в 1848 году в местечке Лауша в Тюрингии, и связано это было с тем, что в этот год был неурожай яблок - а именно ими в основном украшали праздничное дерево, но стеклодувы пришли на выручку традиции и сделали стеклянные шары вместо яблок. По сложившийся традиции стеклянные шары затем их начали выдувать в Саксонии в середине XIX века. Позже появились сложные фигурки из стекла.

Новогодние игрушки в России

На Руси первые ёлочные игрушки делали из тряпок, соломы, цветных ленточек, а уже позднее из бумаги и фольги. Этим производством занимались специальные картонажные мастерские. Стеклянные украшения появились позднее.

Производство Елочных игрушек в России!

Первое в России стеклянное ёлочное производство открыли на заводе под Клином, в имении Меньшиковых, примерно в начале XIX века. Ныне данное завод переименован в ОАО «Ёлочка».

О ёлке!

В 1916 году, во время Первой мировой войны, ёлка была запрещена Священным синодом как «немецкий обычай» и вновь разрешена специальным указом ВЛКСМ перед новым 1936 годом, но уже как Новогодняя ёлка.

О новом годе!

Начало года с 1 января было установлено римским правителем Юлием Цезарем в 46 году до н. э. В Древнем Риме этот день был посвящён Янусу — богу выбора, дверей и всех начал.

Лучше посмотреть этот пример в новой вкладке браузера окне из-за структуры slyweb.ru - Пример CSS3 Media Queries. Если Вы внимательно присмотритесь, то должны заметить, что изменились не только размеры изображений, но и цвет заголовков.

CSS код

Синтаксис Media Queries прост, разрешение, ширина или высота экрана определяется с помощью правила media:

@media (min-width:950px) { .... css свойства для экрана шириной 950 px или больше, но не меньше.... }

Если нужно определить разрешение экрана в определённом интервале, то синтаксис немного изменится:

@media (min-width:450px) and (max-width:950px) { .... css свойства для экрана шириной 450 px или больше, но не больше 950 px.... }

На сегодняшний день Media Queries поддерживают многие новые браузеры:

• Google Chrome 15.0.874.120 +
• Opera 11.52 +
• Firefox 5 +
• Apple Safari 5.1.1 +
• Internet Explorer 9 +

Мобильные устройства имеют различное разрешение и размеры экрана, поэтому нужно предусмотреть, что статьи на больших устройствах могут некорректно смотреться на маленьких, например возьмём следующий css код:

@media (max-width:450px) { .photo img { margin: 0 auto; width: 50%; max-width: 640px; max-height: 480px; border-radius: 10px; } } @media (min-width:450px) { .photo img { margin: 0 auto; width: 100%; max-width: 640px; max-height: 480px; border-radius: 10px; } }

Результат будет разным, можно пойти дальше и менять не только размеры, но и тип шрифта или размер заголовков.

Media Queries могут применяться не только в тех случаях, когда нужно изменить представление страницы в зависимости от её разрешения или размера, но и поддержки количества цветов, так как есть экраны поддерживающие 16 мл. цветов, есть экраны поддерживающие 256 цветов. В зависимости от глубины цветовых характеристик могут применятся разные css стили:

/*css стиль для всех устройств независимо от глубины цветопередачи*/ @media all and (color-index) { … } @media all and (min-color-index: 1) { … } /*css стиль для всех устройств, количество цветов у которых 256*/ @media all and (min-color-index: 256) { … }

Но и это ещё не все, что появляется и будет развиваться в недалеком будущем интернета! Если Вы читаете на английском, то можно заглянуть в раздел официальной документации по Media Queries находится он по адресу http://www.w3.org/TR/css3-mediaqueries/.

А вдруг не работает?

Стандарт CSS 3 поддерживаться многими браузерами стал совсем недавно, поэтому есть смысл знать про возможности определения через javascript поддержки Media Queries со стороны браузера. Прежде всего для этого предназначен метод "window.matchMedia" для IE это "window.msmatchMedia":

if (!window.matchMedia) { // Media Queries не поддерживаются } else { // Media Queries поддерживаются }

Много нового пояилось в CSS3 и в HTML 5, про всё сразу не расскажу, но в следующей статье я постараюсь объяснить про работу с видео и аудио используя CSS3 и jQuery.