آموزش طراحی سایت ریسپانسیو با CSS
طراحی سایت ریسپانسیو یا واکنش گرا از نیازهای اساسی در طراحی سایت‌های جدید به شمار می‌رود. بیشتر بازدیدکنندگان، با استفاده از گوشی‌های موبایل سایت‌ها را مرور می‌کنند و اگر سایت به درستی در موبایل و تبلت قابل مشاهده نباشد، بخش عمده‌ی مخاطبان حس ناخوشایندی را تجربه خواهند کرد.
ابزارها یا فریم‌ورک‌های متعددی برای طراحی سایت واکنش‌گرا موجود هستند که از آن جمله می‌توان به بوت‌استرپ، Foundation، Pure و … اشاره کرد. هرچند استفاده از این‌گونه فریم‌ورک‌های CSS کمک قابل توجهی به کاهش زمان و بهبود کیفیت طراحی سایت به حساب می‌آیند، ولی در کنار این ابزارها، لازم است تا با تکنیک‌های ریسپانسیو آشنایی داشته باشید تا بتوانید یک سایت با کیفیت که در تمامی محیط‌ها به درستی نمایش داده شود، طراحی نمایید.
پیش نیازهای طراحی سایت ریسپانسیو با CSS
پیش از شروع لازم است تا با مفهوم Viewport آشنایی داشته باشید. در صورت نیاز این نوشته را مطالعه کنید.
صفت media
درج فایل‌های CSS در فایل html با استفاده از تگ link به صورت زیر امکان‌پذیر است:
|
1 |
<link rel="stylesheet" href="style.css"> |
با اضافه کردن صفت media به این تگ می‌توانیم، بارگزاری فایل را به گوشی‌های موبایل محدود کنیم:
|
1 |
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:500px)"> |
در قطعه کدبالا، بارگزاری فایل mobile.css را به صفحه‌های نمایشی که عرض آن‌ها حداکثر ۵۰۰ پیکسل است محدود کردیم.
علاوه بر max-width می‌توانیم از ویژگی‌های min-width و min-height و max-height هم استفاده کنیم.
کوئری سلکتور media
علاوه بر روش بالا که از فایل css جداگانه برای هر اندازه صفحه نمایش استفاده می‌کند، می‌توانیم کدهای مربوط به css موبایل را داخل فایل css اصلی هم درج کنیم. انجام این کار به شکل زیر است:
|
1 2 3 4 5 6 7 8 9 |
div { width: 50%; } @media screen and (max-width:500px) { div { width: 100%; } } |
همان طور که مشاهده می‌کنید عرض div در حالت معمول ۵۰ درصد است و اگر صفحه نمایش ما کوچک باشد، div تمام عرض صفحه را اشغال می‌کند.
دقت کنید که چه در حالت صفت media و چه در حالت کوئری سلکتور media، لازم است تا اول کدهای css پیش‌فرض را درج کنید و بعد حالت خاص را قرار دهید چون media اولویت خاصی ندارد و اگر قبل از حالت پیش‌فرض بیاید اثرگذاری خود را از دست می‌دهد.
طراحی سایت واکنش گرا پیشرفته
نکات تخصصی زیادی برای طراحی سایت واکنش‌گرا وجود دارد. اگر می‌خواهید به طور تخصصی این موضوع را دنبال کنید، مطالب زیر برای شماست:
ادامه دارد…