MDX сочетает возможности Markdown и JSX, позволяя создавать интерактивный контент в React-приложениях. Одной из ключевых задач современного веб-разработчика является адаптивное отображение медиа-ресурсов: изображений, видео и графических элементов. В MDX это достигается за счёт интеграции компонентного подхода и возможностей CSS-in-JS.
next/image и компонентами MDXДля оптимизированной загрузки и адаптивного рендеринга изображений в
MDX часто используют компонент Image из Next.js. Он
обеспечивает ленивую загрузку, ресайзинг и поддержку разных
форматов.
import Image from 'next/image';
export default function MediaExample() {
return (
Ключевой параметр sizes позволяет задать условия
для отображения изображения в разных разрешениях экрана, что
делает медиаконтент адаптивным без необходимости создания нескольких
версий картинки вручную.
MDX позволяет использовать компоненты для видео с поддержкой CSS-подходов адаптивного контейнера. Часто применяют технику с «обёрткой», сохраняющей соотношение сторон:
const ResponsiveVideo = ({ src }) => (
);
export default function VideoExample() {
return Эта конструкция сохраняет пропорции видео и автоматически масштабируется под ширину контейнера, что делает его полностью адаптивным.
MDX позволяет импортировать и использовать любые React-компоненты, что открывает возможности для динамических адаптивных медиа:
Пример адаптивной галереи:
const Gallery = ({ images }) => (
{images.map((img, idx) => (
Использование gridTemplateColumns с
auto-fit и minmax позволяет автоматически
подстраивать количество колонок под размер экрана, создавая
естественную адаптивность без медиазапросов.
Для сложных адаптивных решений MDX поддерживает интеграцию со
стилевыми библиотеками (styled-components,
@emotion/react). Пример адаптивного компонента с
использованием styled-components:
import styled from 'styled-components';
const ResponsiveBox = styled.div`
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 16px;
@media (max-width: 768px) {
padding: 8px;
}
`;
export default function BoxExample() {
return Контент, адаптирующийся под экран ;
}Медиазапросы в CSS-in-JS позволяют управлять поведением блоков и медиа-контента без отдельного CSS-файла, что особенно удобно в MDX, где логика и разметка объединены.
Иногда необходимо использовать изображения не как отдельные теги, а как фон контейнера. MDX поддерживает JSX и inline-стили:
const BackgroundSection = ({ image }) => (
);
export default function BackgroundExample() {
return Добавление CSS-свойств background-size: cover и
background-position: center обеспечивает полное
заполнение контейнера изображением с сохранением пропорций, что
делает фон адаптивным без искажения.
MDX в связке с современными сборщиками (Next.js, Vite) позволяет подключать оптимизированные форматы изображений (WebP, AVIF), использовать lazy-loading, а также внедрять автоматическое масштабирование для разных разрешений экранов. Это снижает нагрузку на сеть и ускоряет загрузку страниц.