Может кто-нибудь объяснить, пожалуйста, CSS медиа-запросы?

Question

Я прочитал статью о них на css3.info , но я не чувствовал, что это объясняет это достаточно хорошо.Я также не мог заставить их примеры меняться с моим размером экрана.Я попытался в Safari, FF, Chrome.

Является ли эта функция еще не готовой к реализации?

Если я хочу настроить некоторые стили, когда ширина окна браузера меньше 1024 пикселейКак я могу это сделать?

Answer 1

Правило, применяемое к размеру экрана, означает, что цитирование спецификации W3C "применимо к экранным и карманным устройствам, если ширина области просмотра" в указанных ограничениях.

http://www.w3.org/TR/css3-mediaqueries/

Если вы хотите настроить стиль, когда область просмотра меньше 1024px, вы можете использовать это правило:

@media screen and (max-width: 1024px) { … }

в любом случае это правило применяется только к фактическому размеру окна просмотра. Если вы измените размер области просмотра без перезагрузки страницы, стили не будут применены.

Answer 2

Чтобы применить таблицу стилей к документу при отображении на экране шириной более 800 пикселей:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

Чтобы применить таблицу стилей к документу при отображении на любом устройстве шириной менее 400 пикселей:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

внутри

@media all and (max-width:800px) {
    body { color: red; }
}

для iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

:: объединение медиазапроса

Answer 3

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

• 320 и выше :

  «320 и выше» предотвращает мобильные устройства от загрузки ресурсов рабочего стола с помощью используя таблицу стилей крошечного экрана как его отправная точка.

• Lessframework

  Less Framework - это сеточная система CSS для разработки адаптивных сайтов. Это содержит 4 макета и 3 комплекта пресеты типографики, все на основе одиночная сетка.

Answer 4

Чтобы увидеть, как различные медиа-запросы реагируют на изменение размера или ориентацию, попробуйте демонстрацию на этой странице:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Вы можете настроить атрибуты медиа-запроса, чтобы почувствоватькак они влияют на страницу.