Создание адаптивных веб-страниц с помощью React Response и TypeScript

В современном мире веб-разработки создание адаптивных веб-страниц стало необходимостью. Пользователи ожидают, что сайты будут одинаково хорошо работать на различных устройствах, от настольных компьютеров до мобильных телефонов. React Response и TypeScript предоставляют мощные инструменты для разработки таких адаптивных веб-страниц. Эта статья подробно рассмотрит процесс создания адаптивных веб-страниц с использованием этих технологий.

Что такое React Response?

React Response — это библиотека для создания отзывчивых компонентов в React. Она позволяет разработчикам легко создавать компоненты, которые адаптируются к различным размерам экрана и ориентациям устройств. React Response предоставляет набор хуков и компонентов, которые упрощают процесс создания адаптивного дизайна.

Преимущества использования TypeScript

TypeScript — это типизированное расширение JavaScript, которое добавляет статическую типизацию к языку. Использование TypeScript в проектах React имеет несколько преимуществ:

Улучшенная поддержка IDE и автодополнение кода
Раннее обнаружение ошибок
Улучшенная читаемость и поддерживаемость кода
Более безопасное рефакторирование

Настройка проекта

Для начала работы над проектом необходимо настроить среду разработки. Вот пошаговое руководство по настройке проекта с использованием React, React Response и TypeScript:

Установите Node.js и npm (если они еще не установлены)
Создайте новый проект React с TypeScript, используя Create React App:
```
npx create-react-app my-responsive-app --template typescript
```
Перейдите в каталог проекта:
```
cd my-responsive-app
```
Установите React Response:
```
npm install react-responsive
```
Откройте проект в вашей любимой IDE

Основы React Response

React Response предоставляет несколько ключевых компонентов и хуков для создания адаптивного дизайна:

useMediaQuery: хук для определения соответствия медиа-запросам
MediaQuery: компонент для условного рендеринга на основе медиа-запросов
Context: контекст для обеспечения доступа к информации о медиа-запросах во всем приложении

Рассмотрим пример использования хука useMediaQuery:

 import { useMediaQuery } from 'react-responsive'; const Example = () => { const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' }); return ( <div> {isDesktopOrLaptop ? ( <p>Вы просматриваете на большом экране</p> ) : ( <p>Вы просматриваете на малом экране</p> )} </div> ); };

Создание адаптивных компонентов

При создании адаптивных компонентов важно учитывать различные размеры экранов и ориентации устройств. Вот пример создания адаптивного компонента навигации:

 import React from 'react'; import { useMediaQuery } from 'react-responsive'; const Navigation: React.FC = () => { const isMobile = useMediaQuery({ maxWidth: 767 }); return ( <nav> {isMobile ? ( <MobileMenu /> ) : ( <DesktopMenu /> )} </nav> ); }; const MobileMenu: React.FC = () => ( <ul> <li>Домой</li> <li>О нас</li> <li>Контакты</li> </ul> ); const DesktopMenu: React.FC = () => ( <ul> <li>Домой</li> <li>О нас</li> <li>Услуги</li> <li>Блог</li> <li>Контакты</li> </ul> ); export default Navigation;

Использование CSS-in-JS для адаптивных стилей

CSS-in-JS библиотеки, такие как styled-components, отлично работают с React Response и TypeScript. Они позволяют создавать динамические стили на основе пропсов и медиа-запросов. Вот пример использования styled-components для создания адаптивного заголовка:

 import styled from 'styled-components'; const ResponsiveHeading = styled.h1` font-size: 2rem; color: #333; @media (min-width: 768px) { font-size: 2.5rem; } @media (min-width: 1024px) { font-size: 3rem; } `; const Header: React.FC = () => ( <ResponsiveHeading>Добро пожаловать на наш сайт!</ResponsiveHeading> ); export default Header;

Оптимизация производительности

При создании адаптивных веб-страниц важно учитывать производительность, особенно на мобильных устройствах. Вот несколько советов по оптимизации:

Используйте ленивую загрузку для компонентов и изображений
Оптимизируйте изображения для различных размеров экрана
Минимизируйте количество HTTP-запросов
Используйте кэширование для статических ресурсов

Тестирование адаптивного дизайна

Тестирование адаптивного дизайна — важный этап разработки. Вот несколько инструментов и методов для тестирования:

Инструменты разработчика в браузерах (режим эмуляции устройств)
Реальные устройства с различными размерами экрана
Сервисы для тестирования на различных устройствах (например, BrowserStack)
Автоматизированное тестирование с использованием Cypress или Selenium

Доступность и адаптивный дизайн

Создание адаптивных веб-страниц тесно связано с обеспечением доступности. Вот несколько рекомендаций по улучшению доступности адаптивных веб-страниц:

Используйте семантическую разметку HTML5
Обеспечьте достаточный контраст между текстом и фоном
Используйте ARIA-атрибуты для улучшения навигации с помощью скринридеров
Тестируйте сайт с использованием клавиатуры для навигации

Работа с изображениями в адаптивном дизайне

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

Использование тега <picture> для предоставления различных версий изображений
Применение CSS-свойства object-fit для контроля размеров изображений
Использование lazy-loading для оптимизации загрузки изображений

Пример использования тега <picture> в React компоненте:

 const ResponsiveImage: React.FC = () => ( <picture> <source media="(min-width: 1024px)" srcSet="/images/large.jpg" /> <source media="(min-width: 768px)" srcSet="/images/medium.jpg" /> <img src="/images/small.jpg" alt="Описание изображения" /> </picture> );

Использование CSS Grid и Flexbox

CSS Grid и Flexbox — мощные инструменты для создания адаптивных макетов. Они хорошо работают с React и TypeScript. Вот пример использования CSS Grid для создания адаптивной сетки:

 import styled from 'styled-components'; const Grid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; `; const GridItem = styled.div` background-color: #f0f0f0; padding: 1rem; border-radius: 4px; `; const ResponsiveGrid: React.FC = () => ( <Grid> <GridItem>Элемент 1</GridItem> <GridItem>Элемент 2</GridItem> <GridItem>Элемент 3</GridItem> <GridItem>Элемент 4</GridItem> </Grid> );

Оптимизация для различных устройств ввода

Адаптивный дизайн включает в себя не только адаптацию к различным размерам экрана, но и оптимизацию для различных устройств ввода. Вот несколько советов:

Увеличьте размер кликабельных элементов для сенсорных устройств
Реализуйте жесты свайпа для мобильных устройств
Обеспечьте поддержку клавиатурной навигации

Использование CSS-переменных для адаптивного дизайна

CSS-переменные (пользовательские свойства) могут быть полезны при создании адаптивного дизайна. Они позволяют легко изменять стили в зависимости от размера экрана. Вот пример:

 :root { --font-size-base: 16px; --spacing-unit: 1rem; } @media (min-width: 768px) { :root { --font-size-base: 18px; --spacing-unit: 1.5rem; } } body { font-size: var(--font-size-base); } .container { padding: var(--spacing-unit); }

Создание адаптивных форм

Формы — важная часть многих веб-приложений, и они также должны быть адаптивными. Вот пример создания адаптивной формы с использованием React и styled-components:

 import React from 'react'; import styled from 'styled-components'; const Form = styled.form` display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; @media (min-width: 768px) { max-width: 600px; } `; const Input = styled.input` margin-bottom: 1rem; padding: 0.5rem; font-size: 1rem; `; const Button = styled.button` padding: 0.5rem 1rem; background-color: #007bff; color: white; border: none; cursor: pointer; @media (min-width: 768px) { align-self: flex-start; } `; const ResponsiveForm: React.FC = () => ( <Form> <Input type="text" placeholder="Имя" /> <Input type="email" placeholder="Email" /> <Button type="submit">Отправить</Button> </Form> ); export default ResponsiveForm;

Адаптивная типография

Типография играет важную роль в адаптивном дизайне. Размер шрифта, межстрочный интервал и другие параметры текста должны адаптироваться к размеру экрана. Вот пример использования CSS-функции clamp() для создания адаптивной типографии:

 html { font-size: clamp(16px, 1vw + 1rem, 24px); } h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); } p { line-height: clamp(1.5, 2vw + 1, 2); }

Использование контекста React для адаптивного дизайна

Контекст React может быть полезен для передачи информации о размере экрана и других параметрах адаптивности через дерево компонентов. Вот пример создания и использования контекста для адаптивного дизайна:

 import React, { createContext, useContext, useState, useEffect } from 'react'; interface ResponsiveContextType { isMobile: boolean; isTablet: boolean; isDesktop: boolean; } const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined); export const ResponsiveProvider: React.FC = ({ children }) => { const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [isTablet, setIsTablet] = useState(window.innerWidth >= 768 && window.innerWidth < 1024); const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); setIsTablet(window.innerWidth >= 768 && window.innerWidth < 1024); setIsDesktop(window.innerWidth >= 1024); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return ( <ResponsiveContext.Provider value={{ isMobile, isTablet, isDesktop }}> {children} </ResponsiveContext.Provider> ); }; export const useResponsive = () => { const context = useContext(ResponsiveContext); if (context === undefined) { throw new Error('useResponsive must be used within a ResponsiveProvider'); } return context; };

Теперь можно использовать этот контекст в любом компоненте:

 const MyComponent: React.FC = () => { const { isMobile, isTablet, isDesktop } = useResponsive(); return ( <div> {isMobile && <p>Мобильная версия</p>} {isTablet && <p>Планшетная версия</p>} {isDesktop && <p>Десктопная версия</p>} </div> ); };

Создание адаптивных анимаций

Анимации также должны быть адаптивными. Вот пример создания адаптивной анимации с использованием CSS и React:

 import styled, { keyframes } from 'styled-components'; const fadeIn = keyframes` from { opacity: 0; } to { opacity: 1; } `; const AnimatedBox = styled.div` animation: ${fadeIn} 1s ease-in; background-color: #f0f0f0; padding: 1rem; @media (min-width: 768px) { animation-duration: 0.5s; } `; const ResponsiveAnimation: React.FC = () => ( <AnimatedBox> Этот блок появляется с анимацией </AnimatedBox> );

Оптимизация производительности адаптивных компонентов

При создании адаптивных компонентов важно учитывать производительность. Вот несколько советов по оптимизации:

Используйте React.memo для предотвращения ненужных ререндеров
Применяйте useMemo и useCallback для оптимизации вычислений и функций
Используйте виртуализацию для длинных списков

Пример использования React.memo:

 import React from 'react'; interface ExpensiveComponentProps { data: number[]; } const ExpensiveComponent: React.FC<ExpensiveComponentProps> = React.memo(({ data }) => { // Здесь может быть сложная логика или рендеринг return ( <ul> {data.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); }); export default ExpensiveComponent;

Создание адаптивных таблиц

Таблицы часто представляют проблему в адаптивном дизайне. Вот пример создания адаптивной таблицы с использованием CSS Grid:

 import styled from 'styled-components'; const Table = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); } `; const Cell = styled.div` background-color: #f0f0f0; padding: 1rem; text-align: center; `; const ResponsiveTable: React.FC = () => ( <Table> <Cell>Ячейка 1</Cell> <Cell>Ячейка 2</Cell> <Cell>Ячейка 3</Cell> <Cell>Ячейка 4</Cell> <Cell>Ячейка 5</Cell> <Cell>Ячейка 6</Cell> </Table> );

Использование CSS-модулей с TypeScript

CSS-модули — еще один способ организации стилей в React-приложениях. Они хорошо работают с TypeScript. Вот пример использования CSS-модулей для создания адаптивного компонента:

 // styles.module.css .container { padding: 1rem; } .title { font-size: 1.5rem; } @media (min-width: 768px) { .container { padding: 2rem; } .title { font-size: 2rem; } } // Component.tsx import React from 'react'; import styles from './styles.module.css'; const AdaptiveComponent: React.FC = () => ( <div className={styles.container}> <h1 className={styles.title}>Адаптивный заголовок</h1> </div> ); export default AdaptiveComponent;

Создание адаптивных графиков и диаграмм

Графики и диаграммы также должны быть адаптивными. Библиотеки, такие как Chart.js или D3.js, предоставляют возможности для создания адаптивных визуализаций данных. Вот пример создания адаптивного графика с использованием Chart.js и React:

 import React, { useRef, useEffect } from 'react'; import Chart from 'chart.js/auto'; const ResponsiveChart: React.FC = () => { const chartRef = useRef<HTMLCanvasElement | null>(null); useEffect(() => { if (chartRef.current) { const ctx = chartRef.current.getContext('2d'); if (ctx) { new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false } }); } } }, []); return <canvas ref={chartRef} />; }; export default ResponsiveChart;

Использование CSS-переменных с TypeScript

CSS-переменные могут быть особенно полезны при работе с TypeScript, так как они позволяют создавать типизированные темы. Вот пример использования CSS-переменных с TypeScript:

 // theme.ts export const theme = { colors: { primary: 'var(--color-primary)', secondary: 'var(--color-secondary)', background: 'var(--color-background)', }, fontSizes: { small: 'var(--font-size-small)', medium: 'var(--font-size-medium)', large: 'var(--font-size-large)', }, spacing: { small: 'var(--spacing-small)', medium: 'var(--spacing-medium)', large: 'var(--spacing-large)', }, }; export type Theme = typeof theme; // styles.css :root { --color-primary: #007bff; --color-secondary: #6c757d; --color-background: #ffffff; --font-size-small: 0.875rem; --font-size-medium: 1rem; --font-size-large: 1.25rem; --spacing-small: 0.5rem; --spacing-medium: 1rem; --spacing-large: 1.5rem; } @media (min-width: 768px) { :root { --font-size-small: 1rem; --font-size-medium: 1.25rem; --font-size-large: 1.5rem; --spacing-small: 0.75rem; --spacing-medium: 1.5rem; --spacing-large: 2rem; } } // Component.tsx import React from 'react'; import styled from 'styled-components'; import { theme, Theme } from './theme'; const StyledComponent = styled.div<{ theme: Theme }>` background-color: ${props => props.theme.colors.background}; color: ${props => props.theme.colors.primary}; font-size: ${props => props.theme.fontSizes.medium}; padding: ${props => props.theme.spacing.medium}; `; const ThemeComponent: React.FC = () => ( <StyledComponent theme={theme}> Этот компонент использует типизированную тему </StyledComponent> ); export default ThemeComponent;

Создание адаптивных видео-плееров

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

 import React from 'react'; import styled from 'styled-components'; const VideoContainer = styled.div` position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; max-width: 100%; `; const VideoFrame = styled.iframe` position: absolute; top: 0; left: 0; width: 100%; height: 100%; `; interface ResponsiveVideoProps { src: string; title: string; } const ResponsiveVideo: React.FC<ResponsiveVideoProps> = ({ src, title }) => ( <VideoContainer> <VideoFrame src={src} title={title} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /> </VideoContainer> ); export default ResponsiveVideo;

Оптимизация загрузки шрифтов

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

Используйте font-display: swap для отображения текста до загрузки шрифтов
Предварительно загружайте критически важные шрифты
Используйте форматы woff2 для уменьшения размера файлов

Пример оптимизации загрузки шрифтов:

 <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> <style> @font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}

Создание адаптивных карт

Карты — еще один элемент, который должен быть адаптивным. Библиотеки, такие как Leaflet, предоставляют возможности для создания адаптивных карт. Вот пример создания адаптивной карты с использованием React и Leaflet:

 import React from 'react'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import 'leaflet/dist/leaflet.css'; import styled from 'styled-components'; const MapWrapper = styled.div` height: 400px; width: 100%; @media (min-width: 768px) { height: 600px; } `; const ResponsiveMap: React.FC = () => ( <MapWrapper> <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100%', width: '100%' }}> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> <Marker position={[51.505, -0.09]}> <Popup> Это маркер на карте. </Popup> </Marker> </MapContainer> </MapWrapper> ); export default ResponsiveMap;

Использование CSS-функции min() для адаптивного дизайна

CSS-функция min() может быть полезна для создания адаптивных элементов. Она позволяет задать минимальное значение из нескольких вариантов. Вот пример использования min() для создания адаптивного контейнера:

 const AdaptiveContainer = styled.div` width: min(90%, 1200px); margin: 0 auto; padding: min(5%, 2rem); `;

Создание адаптивных модальных окон

Модальные окна также должны быть адаптивными. Вот пример создания адаптивного модального окна с использованием React и styled-components:

 import React from 'react'; import styled from 'styled-components'; const ModalOverlay = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; `; const ModalContent = styled.div` background-color: white; padding: 2rem; border-radius: 4px; width: 90%; max-width: 500px; @media (min-width: 768px) { width: 70%; } `; interface ModalProps { isOpen: boolean; onClose: () => void; } const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => { if (!isOpen) return null; return ( <ModalOverlay onClick={onClose}> <ModalContent onClick={e => e.stopPropagation()}> {children} </ModalContent> </ModalOverlay> ); }; export default Modal;

Оптимизация для различных типов устройств ввода

При создании адаптивного дизайна важно учитывать различные типы устройств ввода. Вот несколько советов по оптимизации:

Используйте медиа-запрос hover для определения устройств, поддерживающих наведение
Оптимизируйте элементы для сенсорного ввода на мобильных устройствах
Обеспечьте поддержку клавиатурной навигации

Пример использования медиа-запроса hover:

 const Button = styled.button` padding: 0.5rem 1rem; background-color: #007bff; color: white; border: none; cursor: pointer; @media (hover: hover) { &:hover { background-color: #0056b3; } } @media (hover: none) { &:active { background-color: #0056b3; } } `;

Создание адаптивных навигационных меню

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

 import React, { useState } from 'react'; import styled from 'styled-components'; const Nav = styled.nav` background-color: #f8f9fa; padding: 1rem; `; const NavList = styled.ul` list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; } `; const NavItem = styled.li` margin-bottom: 0.5rem; @media (min-width: 768px) { margin-bottom: 0; margin-right: 1rem; } `; const NavLink = styled.a` text-decoration: none; color: #007bff; &:hover { text-decoration: underline; } `; const MenuButton = styled.button` display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; @media (min-width: 768px) { display: none; } `; const MenuContent = styled.div<{ isOpen: boolean }>` display: ${props => props.isOpen ? 'block' : 'none'}; @media (min-width: 768px) { display: block; } `; const ResponsiveMenu: React.FC = () => { const [isOpen, setIsOpen] = useState(false); return ( <Nav> <MenuButton onClick={() => setIsOpen(!isOpen)}>☰</MenuButton> <MenuContent isOpen={isOpen}> <NavList> <NavItem><NavLink href="#">Главная</NavLink></NavItem> <NavItem><NavLink href="#">О нас</NavLink></NavItem> <NavItem><NavLink href="#">Услуги</NavLink></NavItem> <NavItem><NavLink href="#">Контакты</NavLink></NavItem> </NavList> </MenuContent> </Nav> ); }; export default ResponsiveMenu;

Оптимизация для различных ориентаций устройства

Помимо адаптации к различным размерам экрана, важно учитывать различные ориентации устройства, особенно для мобильных устройств. Вот пример использования медиа-запросов для оптимизации под различные ориентации:

 const OrientationAwareComponent = styled.div` padding: 1rem; @media (orientation: portrait) { flex-direction: column; } @media (orientation: landscape) { flex-direction: row; } `;

Использование CSS-функции clamp() для адаптивных размеров

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

 const AdaptiveText = styled.p` font-size: clamp(1rem, 2.5vw, 1.5rem); line-height: clamp(1.5, 2vw, 2); `;

Создание адаптивных слайдеров

Слайдеры — еще один элемент, который требует адаптации для различных размеров экрана. Вот пример создания адаптивного слайдера с использованием React и Slick:

 import React from 'react'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import styled from 'styled-components'; const SliderWrapper = styled.div` width: 100%; max-width: 1200px; margin: 0 auto; `; const Slide = styled.div` padding: 2rem; text-align: center; `; const ResponsiveSlider: React.FC = () => { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }; return ( <SliderWrapper> <Slider {...settings}> <Slide><h3>Слайд 1</h3></Slide> <Slide><h3>Слайд 2</h3></Slide> <Slide><h3>Слайд 3</h3></Slide> <Slide><h3>Слайд 4</h3></Slide> <Slide><h3>Слайд 5</h3></Slide> </Slider> </SliderWrapper> ); }; export default ResponsiveSlider;

Оптимизация загрузки изображений

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

Использование тега <picture> для предоставления различных версий изображений
Применение атрибутов srcset и sizes для адаптивных изображений
Использование lazy-loading для отложенной загрузки изображений

Пример использования тега <picture> и lazy-loading:

 import React from 'react'; const ResponsiveImage: React.FC = () => ( <picture> <source media="(min-width: 1024px)" srcSet="/images/large.jpg" /> <source media="(min-width: 768px)" srcSet="/images/medium.jpg" /> <img src="/images/small.jpg" alt="Адаптивное изображение" loading="lazy" /> </picture> ); export default ResponsiveImage;

Использование CSS Grid для создания адаптивных макетов

CSS Grid предоставляет мощные возможности для создания адаптивных макетов. Вот пример создания адаптивного макета с использованием CSS Grid:

 import styled from 'styled-components'; const Grid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; `; const GridItem = styled.div` background-color: #f0f0f0; padding: 1rem; `; const ResponsiveGrid: React.FC = () => ( <Grid> <GridItem>Элемент 1</GridItem> <GridItem>Элемент 2</GridItem> <GridItem>Элемент 3</GridItem> <GridItem>Элемент 4</GridItem> </Grid> ); export default ResponsiveGrid;

Заключение

Создание адаптивных веб-страниц с использованием React Response и TypeScript предоставляет разработчикам мощные инструменты для создания современных, отзывчивых веб-приложений. Использование медиа-запросов, CSS Grid, Flexbox и других техник позволяет создавать сайты, которые отлично выглядят и работают на различных устройствах.

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