دسته بندی:آموزش برنامه نویسی

تاریخ انتشار:سه شنبه 7 شهریور 1402

نویسنده:مهدی جام گوهری

responsive در tailwindcss | راهنمای جامع

میدانیم که یکی از مهم ترین مباحث برای توسعه ی سایت ها و وبلاگ ها بحث responsive است که به صراحت میتوان گفت که یکی از بزرگترین چالش های یک توسعه دهنده میتواند باشد . مسلما توسعه دهندگان محترم در حال خواندن این مقاله میتوانند در ادامه بخشی از سختی های این مبحث را درک کنند . اما تلویند یکی از پیشگامان مهار سختی های حوزه responsive است ، که در ادامه به قابلیت های تلویند در این حوزه خواهیم پرداخت .

تلویند چیست ؟

قبل از پرداختن به موضوع اصلی می بایست که در مورد تلویند یکسری مقدماتی را معرفی نمود . تلویند به عنوان یک فریمورک برای راحتی در کد نویسی در حوزه فرانت اند است که این فریمورک جذاب و کارآمد در سال 2017 عرضه شد . این فریمورک به منظور توسعه ی سایت ها و وبلاگ ها در سریع ترین زمان ، راحتی کاربر در استایل دهی به المان های html و راحتی در بحث اصلی یعنی responsive ایجاد شد .

ریسپانسیو با تلویند

مطالعه کنید : تلویند چیست؟

ریسپانسیو کردن یعنی چه!؟

واژه ی responsive که در فارسی با عنوان «واکنش گرا» نیز بیان میشود باعث ایجاد تعاملی خاص هنگام تغییر اندازه صفحات در دستگاه های متنوع (نظیر تلفن های هوشمند ، تبلت ، لپتاپ و ...) می باشد که موجب میشود کاربر در هنگام بازدید از یک سایت یا وبلاگ رعایت توازن در نوشتار ، عکس ها و دیگر المان های در سایت یا وبلاگ را ببیند که این موضوع دلخواه تمام بازدید کنندگان است . به دیگر سخن ، ریسپانسیو بودن یک سایت به این منظور است که ظاهر سایت یا وبلاگ در تمامی دستگاه های قابل استفاده کاربر که با آن از سایت دیدار میکند دچار از هم گسیختگی و به هم ریخته نباشد و به گونه ای مناسب دستگاه های قابل استفاده ی کاربر باشد . یکی از دیگر قابلیت هایی که ریسپانسیو برای توسعه دهنده ایجاد میکند بهینه تر بودن کد ها و یا سایت هنگام ریسپانسیو بودن است .

ریسپانسیو در تلویند

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

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

`sm` : 640 پیکسل
`md` : 768 پیکسل
`lg` : 1024 پیکسل
`xl` : 1280 پیکسل
`2xl`: 1536 پیکسل

برای استفاده از هر کلاس کاربردی مانند زیر ابتدا پیشوند متعلق به نقطه ی شکست مورد نظر را وارد میکنیم سپس با ":" کلاسی که میخواهیم در آن نقطه ی شکست تغییر کند را بلافاصله بعد از علامت ":" وارد میکنیم .

         
            <!doctype html>
            <html>
            <head>
                <script src="https://cdn.tailwindcss.com"></script>
            </head>
            <body>
                <h1 class="text-3xl md:text-lg sm:font-bold sm:text-md">
                Hello World!
                </h1>
            </body>
            </html>

مجدد این نکته را یادآور می شوم که کاربر میتواند بلافاصله هر کلاس مد نظرش را که میل دارد در نقطه ی شکست مشخص کرده بدهد !! برای فراگیری کامل در حوزه ی تلویند و طریقه ی ریسپانسیو آن میتوانید دوره ی دوره آموزش Tailwind css و Sass را خریداری نموده و از امکان پشتیبانی 24 ساعته بهره مند شوید .

ریسپانسیو کردن با فریمورک Tailwind Css

ریسپانسیو کردن با استفاده از کلاس های شخصی

کاربر میتواند مجزای از قابلیت هایی که تلویند برای او فراهم آورده است برای خود نقاط شکست را در بخش tailwind.config.js/module.exports/theme/screens به صورت جداگانه تعریف کرده و از آنها استفاده نماید .
در بخش زیر می توانیم اندازه های تعریف شده توسط کاربری را مشاهده نماییم

      
      module.exports = {
        theme : {
          screens: {
            'tablet': '640px',
            'laptop': '1024px',
            'desktop': '1280px'
          },
        }
      }

در عرض و اندازه ی تبلت که نوعی نقطه ی شکست قرار دادی خود کاربر است ، کاربر میتواند در اندازه ی 640 پیکسل به بالاتر را دستخوش تغییرات مطلوب خود کند . یعنی هر کلاسی که میخواهد در به المان ها بدهد .
در عرض و اندازه های لپ تاپ و دکستاپ نیز به همین نحو برقرار است .که فراخوانی همگی این موارد در بالا به طور کامل شرح داده شده است .

اما این آخرین لطف تلویند در حق کاربران نیست !!! کاربران میتوانند در هر محدوده ی عرضی که میخواهند و یا در هر عرضی که میخواهند به المان ها در نقطه ی شکست تعیین شده به اندازه ی دلخواه هر نوع کلاسی بدهند .
در بخش زیر میتوانیم اندازه های تعریف شده توسط کاربری را مشاهده نماییم

        
            <!doctype html>
            <html>
            <head>
                <script src="https://cdn.tailwindcss.com"></script>
            </head>
            <body>
              <h1 class="min-[400px]:text-center max-[620px]:bg-sky-300">
              Hello World! My name is </> and my work is programming , I work with tailwind css for many years and I'm glad I could help you , nice to meet you .
              </h1>
            </body>
            </html>

تلویند بهترین فریمورک دیزاین دهی به المان ها !!

سخن پایانی

در پایان شرکت برنامه نویسی وارنا امید وار است که به کاربران محترمی که مقاله را مطالعه نموده اند کمک کرده باشد
شما می توانید برای دریافت اموزش تمامی نکات کاربردی Tailwind و Sass به سایت شرکت برنامه نویسی وارنا مراجعه نموده و در قسمت اموزش ها ضمن خرید دوره اموزش Tailwind و Sass از امکان پشتیبانی 24 ساعته جهت رفع اشکال و بالا بردن سطح تسلط خود استفاده نمایید. همچنین شرکت برنامه نویسی وارنا به دنبال جذب افراد مستعد و علاقه مند به برنامه نویسی است که اطلاعات کامل ان در بخش اموزش و استخدام سایت وارنا موجود می باشد.