Лучшее руководство по CSS3 запрос @media в 2024 году. В этом руководстве вы можете изучить примеров,Определения и использование,Поддержка браузеров,CSS Синтаксис,Тип носителя,возможности СМИ,Другие примеры,примеров,Похожие страницы,

CSS3 запрос @media

примеров

Если документ шириной менее 300 пикселей, чтобы изменить фон презентации (цвет фона):

Экран @media и (макс-ширина: 300px) {
тело {
цвет фона: Lightblue;
}
}

Попробуйте »

Определения и использование

Используйте @media запросов, вы можете определить различные стили для различных типов носителей.

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

При сбросе размер окна браузера процесса, страница будет повторно отобразить страницу, основываясь на ширине и высоте браузера.


Поддержка браузеров

Цифры в таблице указывают правила с @media опорные первый номер версии браузера.

правило
@media 21 9 3.5 4.0 9


CSS Синтаксис

@media MEDIATYPE и | не | только (функция СМИ) {
CSS-код;
}

Вы можете также использовать различные таблицы стилей для различных сред:

<Ссылка отн = "таблица стилей" медиа = "MediaType и | не | только (функция СМИ)" HREF = "mystylesheet.css">

Тип носителя

значение описание
все Для всех устройств
ушной Вышло из употребления. Для речи и речевого синтезатора
шрифт Брайля Вышло из употребления. Braille оборудование, используемое в сенсорной обратной связи
тиснение Вышло из употребления. Слепой печатающее устройство для печати
портативный Вышло из употребления. Для портативных устройств или небольших устройств, таких как PDA и небольшой телефон
печать Для принтеров и предварительного просмотра
проекция Вышло из употребления. Для проекционного оборудования
экран Для компьютерных экранов, планшетные ПК, смартфоны и тому подобное.
речь Применительно к устройствам считывания с экрана и другого звукового оборудования
TTY Вышло из употребления. Для фиксации сетки символов, таких как телеграф, терминального оборудования и ограниченный характер портативного устройства
телевизор Вышло из употребления. Для TV и Web TV

возможности СМИ

значение описание
соотношение сторон Определить устройство вывода в видимой области ширины страницы соотношения высоты
цвет Определение устройства вывода в каждой группе количество цветного оригинала. Если это не цвет устройства, то значение равно 0
цветовой индекс Число записей в таблицы значений цвета определяется в устройстве вывода. Если вы не используете таблицы цветов, значение равно 0
устройства соотношение сторон устройство вывода определения экрана видна отношение ширины к высоте.
Устройство высоты устройство вывода определения экрана видимая высота.
Устройство ширины устройство вывода определения экрана видимая ширина.
сетка Выходное устройство используется для запроса ли сетки или решетки.
высота Определить устройство вывода в видимой области высоты страницы.
макс-соотношение сторон устройство вывода определения экрана виден максимальное отношение ширины к высоте.
макс-цвет Определить максимальное число устройств вывода каждого набора цветного оригинала.
макс-цвет-индекс Максимальное число записей в таблицы значений цвета определяется в устройстве вывода.
макс-устройств соотношение сторон устройство вывода определения экрана виден максимальное отношение ширины к высоте.
макс-устройства по высоте Экран определить устройства вывода, видимые на максимальную высоту.
макс-устройства ширина устройство вывода определения экрана максимальная видимая ширина.
макс высоты Определить устройство вывода в видимой области максимальной высоты страницы.
макс-монохромный Определяется в монохромном буфере кадра содержит на пиксель является максимальное количество монохромного оригинала.
макс-разрешение Максимальное разрешение определяет устройство.
макс-ширина Определить устройство вывода в видимой области максимальной ширины страницы.
мин-соотношение сторон Определить устройство вывода в области страницы видимого минимального отношения ширины к высоте.
мин-цвет Определение устройства вывода каждого набора минимальное количество цветного оригинала.
мин-цвет-индекс Минимальное количество записей в таблицы значений цвета определяется в устройстве вывода.
мин-устройства соотношение сторон Экран определения устройства вывода видимого минимальное соотношение ширины к высоте.
мин-устройства ширина выводимых на экран устройства определяется минимальной шириной видимой.
мин-устройства по высоте Минимальное определение экрана видимой высоты выходного устройства.
мин-высота Определить устройство вывода в видимой области минимальной высоты страницы.
мин-монохромный Минимальное количество цветных оригиналов определяется в буфере монохромный кадр содержит на пиксель
мин-разрешение Минимальное разрешение определяет устройство.
мин-ширина Определить устройство вывода в видимой области минимальной ширины страницы.
монохромный Определяется в буфере кадра монохромный содержит на пиксель монохромный оригинальный номер. Если это не монохромное устройство, значение равно 0
ориентация Определить устройство вывода в видимой области спектра от высоты страницы больше или равна ширине.
разрешение Определите разрешение устройства. Такие, как: 96dpi, 300dpi, 118dpcm
сканирование Сканирование Definition TV тип оборудования.
ширина Определить устройство вывода в видимой области ширины страницы.


примеров

Другие примеры

примеров

Используйте @media запросов для создания адаптивного дизайна:

@media только экран и (макс-ширина : 500px) {
.gridmenu {
ширина: 100%;
}

.gridmain {
ширина: 100%;
}

.gridright {
ширина: 100%;
}
}

Попробуйте »

Похожие страницы

Учебник CSS: типы носителей CSS

CSS3 запрос @media
10/30