Как я могу сделать свое приложение React на 100% отзывчивым, сохранив при этом существующие стили? [закрыто] ⇐ CSS

[Anonymous]

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

Код: Выделить всё

import { useState } from 'react';
import './App.css';
import image from './assets/image.jpg';

function App() {
const [count, setCount] = useState(0);

return (


[img]{image} className=[/img]


Build a self care routine suitable for you

Take our test to get a personalized self care routine based on your needs.


Start the quiz



);
}

export default App;

А вот соответствующий CSS (App.css):

Код: Выделить всё

body, html, #root {
margin: 0;
padding: 0;
height: 100%;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.image-container {
position: relative;
display: inline-block;
}

.top-image {
width: 100%;
height: auto;
}

.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 0, 0, 0.5);
color: white;
border-radius: 0.5rem;
width: 90%;
max-width: 600px;
padding: 20px;
text-align: center;
box-sizing: border-box;
}

.title-container {
font-size: 2.5rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 10px;
}

.text-container {
font-size: 1rem;
margin-bottom: 20px;
}

.start-button {
width: 100%;
max-width: 200px;
height: 47px;
padding: 14px 40px;
border-radius: 8px;
background: #C3EDFF;
margin-top: 24px;
font-family: Proxima Nova;
font-size: 16px;
font-weight: 500;
line-height: 19.49px;
text-align: center;
}

.button-text {
font-family: Proxima Nova;
font-size: 16px;
font-weight: 500;
line-height: 19.49px;
text-align: center;
}

Я пробовал использовать свойства ширины в процентах и ​​максимальной ширины вместе с медиа-запросами, но столкнулся с трудностями при обеспечении правильного масштабирования и хорошего внешнего вида. на всех устройствах.
В частности, мне нужна помощь в следующем:
обеспечение правильной настройки .centered-div и .start-button в зависимости от размера экрана.
Обработка размеров и интервалов шрифтов для обеспечения читаемости на разных устройствах.
Любые дополнительные советы по CSS или рекомендации по обеспечению отзывчивости без существенного изменения текущего дизайна.
Я признателен за любые советы или предложения о том, как добиться полной отзывчивости, сохраняя при этом текущий макет и стили. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/786 ... les-intact