Лучшее руководство по CSS3 запрос @media в 2024 году. В этом руководстве вы можете изучить примеров,Определения и использование,Поддержка браузеров,CSS Синтаксис,Тип носителя,возможности СМИ,Другие примеры,примеров,Похожие страницы,
CSS3 запрос @media
примеров
Если документ шириной менее 300 пикселей, чтобы изменить фон презентации (цвет фона):
тело {
цвет фона: Lightblue;
}
}
Попробуйте »
Определения и использование
Используйте @media запросов, вы можете определить различные стили для различных типов носителей.
@media могут быть установлены для различных размеров экрана различные стили, особенно если вам необходимо установить дизайн реагирующие страниц, @ средств массовой информации является очень полезным.
При сбросе размер окна браузера процесса, страница будет повторно отобразить страницу, основываясь на ширине и высоте браузера.
Поддержка браузеров
Цифры в таблице указывают правила с @media опорные первый номер версии браузера.
правило | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Синтаксис
CSS-код;
}
Вы можете также использовать различные таблицы стилей для различных сред:
Тип носителя
значение | описание |
---|---|
все | Для всех устройств |
ушной | Вышло из употребления. Для речи и речевого синтезатора |
шрифт Брайля | Вышло из употребления. Braille оборудование, используемое в сенсорной обратной связи |
тиснение | Вышло из употребления. Слепой печатающее устройство для печати |
портативный | Вышло из употребления. Для портативных устройств или небольших устройств, таких как PDA и небольшой телефон |
печать | Для принтеров и предварительного просмотра |
проекция | Вышло из употребления. Для проекционного оборудования |
экран | Для компьютерных экранов, планшетные ПК, смартфоны и тому подобное. |
речь | Применительно к устройствам считывания с экрана и другого звукового оборудования |
TTY | Вышло из употребления. Для фиксации сетки символов, таких как телеграф, терминального оборудования и ограниченный характер портативного устройства |
телевизор | Вышло из употребления. Для TV и Web TV |
возможности СМИ
значение | описание |
---|---|
соотношение сторон | Определить устройство вывода в видимой области ширины страницы соотношения высоты |
цвет | Определение устройства вывода в каждой группе количество цветного оригинала. Если это не цвет устройства, то значение равно 0 |
цветовой индекс | Число записей в таблицы значений цвета определяется в устройстве вывода. Если вы не используете таблицы цветов, значение равно 0 |
устройства соотношение сторон | устройство вывода определения экрана видна отношение ширины к высоте. |
Устройство высоты | устройство вывода определения экрана видимая высота. |
Устройство ширины | устройство вывода определения экрана видимая ширина. |
сетка | Выходное устройство используется для запроса ли сетки или решетки. |
высота | Определить устройство вывода в видимой области высоты страницы. |
макс-соотношение сторон | устройство вывода определения экрана виден максимальное отношение ширины к высоте. |
макс-цвет | Определить максимальное число устройств вывода каждого набора цветного оригинала. |
макс-цвет-индекс | Максимальное число записей в таблицы значений цвета определяется в устройстве вывода. |
макс-устройств соотношение сторон | устройство вывода определения экрана виден максимальное отношение ширины к высоте. |
макс-устройства по высоте | Экран определить устройства вывода, видимые на максимальную высоту. |
макс-устройства ширина | устройство вывода определения экрана максимальная видимая ширина. |
макс высоты | Определить устройство вывода в видимой области максимальной высоты страницы. |
макс-монохромный | Определяется в монохромном буфере кадра содержит на пиксель является максимальное количество монохромного оригинала. |
макс-разрешение | Максимальное разрешение определяет устройство. |
макс-ширина | Определить устройство вывода в видимой области максимальной ширины страницы. |
мин-соотношение сторон | Определить устройство вывода в области страницы видимого минимального отношения ширины к высоте. |
мин-цвет | Определение устройства вывода каждого набора минимальное количество цветного оригинала. |
мин-цвет-индекс | Минимальное количество записей в таблицы значений цвета определяется в устройстве вывода. |
мин-устройства соотношение сторон | Экран определения устройства вывода видимого минимальное соотношение ширины к высоте. |
мин-устройства ширина | выводимых на экран устройства определяется минимальной шириной видимой. |
мин-устройства по высоте | Минимальное определение экрана видимой высоты выходного устройства. |
мин-высота | Определить устройство вывода в видимой области минимальной высоты страницы. |
мин-монохромный | Минимальное количество цветных оригиналов определяется в буфере монохромный кадр содержит на пиксель |
мин-разрешение | Минимальное разрешение определяет устройство. |
мин-ширина | Определить устройство вывода в видимой области минимальной ширины страницы. |
монохромный | Определяется в буфере кадра монохромный содержит на пиксель монохромный оригинальный номер. Если это не монохромное устройство, значение равно 0 |
ориентация | Определить устройство вывода в видимой области спектра от высоты страницы больше или равна ширине. |
разрешение | Определите разрешение устройства. Такие, как: 96dpi, 300dpi, 118dpcm |
сканирование | Сканирование Definition TV тип оборудования. |
ширина | Определить устройство вывода в видимой области ширины страницы. |
Другие примеры
примеров
Используйте @media запросов для создания адаптивного дизайна:
.gridmenu {
ширина: 100%;
}
.gridmain {
ширина: 100%;
}
.gridright {
ширина: 100%;
}
}
Попробуйте »
Похожие страницы
Учебник CSS: типы носителей CSS