طراحی صفحه ریسپانسیو

اول اینکه از متا viewport داخل تگ head حتما استفاده کن

    <meta name="viewport" content="width=device-width, initial-scale=1" />

 برای ریسپانسیو کردن یک صفحه وب حتما باید از مدیا کویری استفاده کنی
ولی برای راحتی کار میتونی از متغیرها در css استفاده کنی
یه نگاهی به این صفحه بکن
w3school

میتونی از تیلویند استفاده کنی واقعا کارت راحت میشه و امکان شخصی سازی بالایی بهت میده. مثلا اینطوری:

<p class="text-lg sm:text-xl"></div>

سلام
دوست عزیز برای ریسپانسیو کردن دو راه میتونید انتخاب کنید استفاده از مدیا کویری یا فریمورک / کتابخانه
-اگر مشکل تان فقط ریسپانسیو کردن بهتر سراغ هیچ فریمورکی یا کتابخانه ای نرید و عاقلانه نیست که به خاطر حل ریسپانسیو یک حجم از فایل بالا بیاری ؛ فریمورک یا کتابخانه زمانی خوبه که از تمام امکاناتش استفاده کنید و سرعت توسعه تان را افزایش بدید.
-درباره مدیا کویری میتونم بگم با استفاده ۴ یا ۵ مدیا کویری با اندازه ای مختلف و با تعریف یک روت در css کد خوانا و راحتی پیاده کنید و برای ریسپانسیو کردن فقط چند پراپرتی css مثل سایز نوشته ها و پدینگ و مارجین و دیسپلی و... به صورت متغییر در روت css قرار میگیره و کلاس ها ازشان استفاده میکنند.