آموزش طراحی سایت ریسپانسیو با CSS

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

ابزارها یا فریم‌ورک‌های متعددی برای طراحی سایت واکنش‌گرا موجود هستند که از آن جمله می‌توان به بوت‌استرپ، Foundation، Pure و … اشاره کرد. هرچند استفاده از این‌گونه فریم‌ورک‌های CSS کمک قابل توجهی به کاهش زمان و بهبود کیفیت طراحی سایت به حساب می‌آیند، ولی در کنار این ابزارها، لازم است تا با تکنیک‌های ریسپانسیو آشنایی داشته باشید تا بتوانید یک سایت با کیفیت که در تمامی محیط‌ها به درستی نمایش داده شود، طراحی نمایید.

طراحی سایت واکنش گرا - Responsive

پیش نیازهای طراحی سایت ریسپانسیو با CSS

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

صفت media

درج فایل‌های CSS در فایل html با استفاده از تگ link به صورت زیر امکان‌پذیر است:

با اضافه کردن صفت media به این تگ می‌توانیم، بارگزاری فایل را به گوشی‌های موبایل محدود کنیم:

در قطعه کدبالا، بارگزاری فایل mobile.css را به صفحه‌های نمایشی که عرض آن‌ها حداکثر ۵۰۰ پیکسل است محدود کردیم.

علاوه بر max-width می‌توانیم از ویژگی‌های min-width و min-height و max-height هم استفاده کنیم.

کوئری سلکتور media

علاوه بر روش بالا که از فایل css جداگانه برای هر اندازه صفحه نمایش استفاده می‌کند، می‌توانیم کدهای مربوط به css موبایل را داخل فایل css اصلی هم درج کنیم. انجام این کار به شکل زیر است:

همان طور که مشاهده می‌کنید عرض div در حالت معمول ۵۰ درصد است و اگر صفحه نمایش ما کوچک باشد، div تمام عرض صفحه را اشغال می‌کند.

دقت کنید که چه در حالت صفت media و چه در حالت کوئری سلکتور media، لازم است تا اول کدهای css پیش‌فرض را درج کنید و بعد حالت خاص را قرار دهید چون media اولویت خاصی ندارد و اگر قبل از حالت پیش‌فرض بیاید اثرگذاری خود را از دست می‌دهد.

طراحی سایت واکنش گرا پیشرفته

نکات تخصصی زیادی برای طراحی سایت واکنش‌گرا وجود دارد. اگر می‌خواهید به طور تخصصی این موضوع را دنبال کنید، مطالب زیر برای شماست:

ادامه دارد…

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱