Вот несколько методов написания медиа-запросов с базовым синтаксисом:

1. Синтаксис встроенного медиа-запроса.
   Этот метод предполагает непосредственное встраивание медиа-запросов в код HTML или CSS с использованием правила @media. Вот пример:

   <style>
    @media (max-width: 768px) {
      /* CSS styles for screens up to 768px wide */
    }
   </style>

2. Внешняя таблица стилей.
   В этом методе вы создаете отдельный файл CSS и связываете его с вашим HTML-документом с помощью тега . Вот пример:

   <link rel="stylesheet" media="(max-width: 768px)" href="mobile-styles.css">

3. Правило CSS Media:
   Этот метод предполагает использование правила @mediaв файле CSS для определения медиазапросов. Вот пример:

   @media (max-width: 768px) {
    /* CSS styles for screens up to 768px wide */
   }

4. Несколько медиа-запросов.
   Вы можете объединить несколько медиа-запросов для таргетинга на экраны разных размеров или устройства. Вот пример:

   @media (max-width: 768px) {
    /* CSS styles for screens up to 768px wide */
   }
   @media (min-width: 769px) and (max-width: 1200px) {
    /* CSS styles for screens between 769px and 1200px wide */
   }
   @media (min-width: 1201px) {
    /* CSS styles for screens wider than 1200px */
   }

5. Использование CSS-фреймворков.
   Многие CSS-фреймворки, такие как Bootstrap или Foundation, предоставляют встроенные классы и утилиты для адаптивного дизайна. Эти платформы часто скрыто используют медиа-запросы.