Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » Дизайн » CSS3 Media Queries становится официальной рекомендацией W3C RSS
апр 07 2013 photo

CSS3 Media Queries становится официальной рекомендацией W3C

admin 6 897
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

CSS3 Media QueriesCSS3 Media Queries


CSS3 Media Queries  модуль был выпущен в качестве официальной рекомендации W3C от 19 июня 2012 года, по случаю окончания цикла разработки, которая началась более десяти лет назад (первый рабочий проект спецификации был опубликован 4 апреля 2001 года).

Стандарт CSS3 Media Queries - позволяет создавать дизайн веб-проектов, адаптированных к различным устройствам, таким как персональные компьютеры, планшеты, мобильные телефоны. Отображение веб-сайта происходит по-разному в зависимости от размера экрана или соотношение сторон устройства. Данная инновационная разработка стала одной из самых обсуждаемых тем в области CSS3 в последние месяцы, так как концепция реагирующего дизайна постоянно набирает обороты, в основном в результате быстрого роста числа различных устройств (и различных разрешений экранов), на которых пользователи могут заходить в Сеть (смартфоны, планшеты и даже современные телевизоры).

Для использования CSS3 Media Queries необходимо создать и подключить новый css файл:

<link href="queries.css" rel="stylesheet">

В данном файле необходимо прописывать стили, которые будут менять размеры контейнеров, в зависимости от разрешения экрана:

@media (min-width: 768px) and (max-width: 979px) {   .container {     width: 760px;   }}

 
Конечно, если у вас изначально резиновая верстка, то ширину контейнеров необходимо задавать в процентах, как и все отступы, размеры шрифтов и т.д.

Демонстрацию возможностей CSS3 Media Queries можно посмотреть на сайте Microsoft. Чтобы увидеть, как изменяются размеры блоков, просто измените размер окна своего браузера!
Теги: CSS3 Media Queries Дизайн

HashFlare
Другие новости по теме:
  • Принципы резиновой верстки сайта
  • Почему 2013 год является годом отзывчивого веб-дизайна
  • Красивое вертикальное меню на CSS
  • Модуль iComm 6.0 - последние комментарии для DLE 9.6 - 9.8
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?

Комментарии к: CSS3 Media Queries становится официальной рекомендацией W3C (2)

    1. №1  hagnir 20-04-2013 Цитировать
      Кроме данной технологии, можно использовать html Фреймворки или наборы инструментов, в которых уже по умолчанию задействован адаптивный дизайн, например twitter bootstrap.
    1. №2  Andrus 27-04-2013 Цитировать
      В последнее время стал замечать, что большинство платных шаблонов стали делать при помощи подобной технологии. Похоже, что для этого применяются форки на подобие bootstrap, получается быстро, качественно и не надо заморачиваться по поводу адаптации сайта под разные разрешения экрана.
Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Принципы резиновой верстки сайта
  • Почему 2013 год является годом отзывчивого веб-дизайна
  • Красивое вертикальное меню на CSS
  • Модуль iComm 6.0 - последние комментарии для DLE 9.6 - 9.8
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Принципы резиновой верстки сайта
  • Как выявить дополнительные резервы для продвижения в поиске
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
  • Плавная прокрутка страницы сайта
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015