Под «CSS только для мобильных устройств» подразумевается практика использования CSS (каскадных таблиц стилей) для применения определенных стилей или правил исключительно к мобильным устройствам, таким как смартфоны или планшеты. Это позволяет разработчикам создавать индивидуальный пользовательский интерфейс для мобильных пользователей, оптимизируя макет, дизайн и функциональность веб-сайта или веб-приложения. Вот несколько методов, которые обычно используются для реализации CSS только для мобильных устройств:

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

@media only screen and (max-width: 768px) {
  /* Mobile-specific styles here */
}

2. Мобильный класс: вы можете добавить определенный класс к элементам HTML, которые должны иметь стили, специфичные для мобильных устройств, и определить эти стили в своем CSS. Например:

HTML:

<div class="mobile-only">This is mobile-only content.</div>

CSS:

@media only screen and (max-width: 768px) {
  .mobile-only {
    /* Mobile-specific styles here */
  }
}

3. Отдельные таблицы стилей. Другой подход — использовать отдельные файлы CSS для мобильных устройств. Вы можете включать различные таблицы стилей в зависимости от типа устройства или размера экрана, используя HTML или логику на стороне сервера. Например:

HTML:

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

4. Обнаружение JavaScript: вы можете использовать JavaScript для обнаружения устройства пользователя и динамического применения стилей, специфичных для мобильных устройств. Этот метод позволяет вам лучше контролировать стиль в зависимости от различных факторов. Вот пример использования JavaScript и jQuery:

HTML:

<div id="mobile-content">This is mobile-only content.</div>

JavaScript:

if (/Mobi|Android/i.test(navigator.userAgent)) {
  $('#mobile-content').addClass('mobile-only');
}

CSS:

.mobile-only {
  /* Mobile-specific styles here */
}