Какво е CSS Media Query?

CSS media query е техника, която ви позволява да прилагате различни стилове въз основа на характеристики на устройството, като размер на екрана, разделителна способност, ориентация или цветна схема. Media queries са основата на адаптивния уеб дизайн, позволявайки на уебсайтовете да адаптират своя оформление и външен вид на различни устройства - от смартфони до настолни монитори. Те използват правилото @media в CSS, за да условно прилагат стилове само когато са изпълнени определени условия.

Описание на инструмента

Този инструмент ви помага да генерирате CSS media queries без да запомняте сложния синтаксис. Просто изберете целевия тип медия, посочете размерите, изберете функции на устройството и инструментът генерира пълното правило @media, готово за използване във вашите таблици със стилове. Той поддържа всички съвременни функции на media query, включително размери на видимата област, ориентация на екрана, съотношения на страните, детектиране на разделителната способност и предпочитания за цветна схема.

Функции

  • Избор на тип медия: Изберете между всички, екран, печат или речеви типове медия
  • Контроли на размерите: Задайте минимална и максимална ширина/височина с всяка CSS единица (px, em, rem, vw и т.н.)
  • Функции на устройството: Конфигурирайте ориентация, съотношение на страните, разделителна способност и предпочитания за цветна схема
  • Персонализирани условия: Добавете всяка персонализирана функция на медия, като способност за задържане или тип показалец
  • Логически оператори: Комбинирайте условия с помощта на AND, OR или NOT оператори за сложни заявки
  • Преглед в реално време: Вижте генерирания CSS код, който се актуализира в реално време, докато коригирате настройките
  • Справка за общи точки на прекъсване: Бърз достъп до стандартни точки на прекъсване за мобилни устройства, таблети, настолни компютри и специални функции

Случаи на използване

  • Създаване на адаптивни оформления, които се адаптират към различни размери на екрана
  • Насочване към конкретни устройства като таблети или смартфони
  • Внедряване на теми в тъмен и светъл режим
  • Оптимизиране на таблици със стилове за печат
  • Детектиране на дисплеи с висока разделителна способност (retina)
  • Коригиране на оформления въз основа на ориентация на устройството
  • Изграждане на адаптивни дизайни, ориентирани към мобилни устройства или настолни компютри
  • Тестване и изучаване на синтаксиса на CSS media query