Медиа-запросы — важная часть современной веб-разработки, позволяющая разработчикам создавать адаптивный дизайн, адаптирующийся к различным размерам экранов и устройствам. В этой статье мы рассмотрим различные методы использования медиа-запросов в TypeScript, а также примеры кода, демонстрирующие их реализацию. К концу вы получите четкое представление о том, как использовать медиа-запросы в ваших проектах TypeScript.

1. Использование медиазапросов CSS.
   Медиазапросы CSS широко используются для применения стилей на основе характеристик устройства или области просмотра. TypeScript может использовать эти запросы для динамического изменения поведения вашего приложения. Вот пример:

const myElement = document.getElementById('myElement');
const mediaQuery = window.matchMedia('(max-width: 600px)');
function handleMediaQueryChange(mediaQuery: MediaQueryList) {
  if (mediaQuery.matches) {
    // Apply styles for small screens
    myElement.classList.add('small-screen');
  } else {
    // Apply styles for larger screens
    myElement.classList.remove('small-screen');
  }
}
handleMediaQueryChange(mediaQuery); // Initial check
mediaQuery.addEventListener('change', handleMediaQueryChange);

1. Использование событий изменения размера окна.
   Другой способ обработки медиа-запросов в TypeScript — использование событий изменения размера окна. Этот подход полезен, когда вам нужно динамически обновлять макет или поведение вашего приложения в зависимости от размера окна. Вот пример:

function handleWindowResize() {
  const screenWidth = window.innerWidth;
  if (screenWidth <= 600) {
    // Apply styles for small screens
    // ...
  } else if (screenWidth <= 1024) {
    // Apply styles for medium screens
    // ...
  } else {
    // Apply styles for larger screens
    // ...
  }
}
window.addEventListener('resize', handleWindowResize);

1. Использование библиотек CSS-in-JS.
   Если вы используете библиотеку CSS-in-JS, такую ​​как styled-comments или Emotion, вы можете использовать возможности TypeScript для определения медиа-запросов внутри ваших компонентов.. Этот подход позволяет вам писать стили CSS непосредственно в коде TypeScript. Вот пример использования стилевых компонентов:

import styled from 'styled-components';
const MyComponent = styled.div`
  /* Regular styles */
  @media (max-width: 600px) {
    /* Styles for small screens */
  }
  @media (min-width: 601px) and (max-width: 1024px) {
    /* Styles for medium screens */
  }
  @media (min-width: 1025px) {
    /* Styles for larger screens */
  }
`;

Медиа-запросы — мощный инструмент для создания адаптивных веб-приложений, и TypeScript предоставляет несколько методов для эффективной работы с ними. В этой статье мы рассмотрели три распространенных подхода: использование медиазапросов CSS, событий изменения размера окна и библиотек CSS-in-JS. Используя эти методы, вы сможете создавать гибкие и адаптируемые пользовательские интерфейсы, подходящие для экранов различных размеров и устройств.