آموزش طراحی سایت ریسپانسیو با CSS
بیشتر بازدیدکنندگان سایت شما را با موبایل باز می‌کنند. این در حالی است که طراحی سایت معمولا روی کامپیوتر انجام می‌شود. سایت‌های جدید باید بتوانند هم در موبایل و هم روی لپ‌تاپ به خوبی دیده شوند و در زمینه‌ی کارایی نیز در همه‌جا به خوبی عمل کنند.
یک روش مقرون به صرفه برای درست کردن سایت‌هایی با این ویژگی، طراحی سایت واکنش‌گرا یا ریسپانسیو است. در طراحی سایت واکنش‌گرا، سایت به ابعاد خاصی وابسته نیست و بر اساس عرض صفحه به طور نامحدود تغییر شکل و اندازه می‌دهد تا همیشه قابل استفاده و مشاهده باشد.
طراحی سایت واکنش‌گرا با استفاده از فریم‌ورک‌های مختلفی امکان‌پذیر است. ما در این نوشته به اصول طراحی سایت ریسپانسیو به صورت پایه‌ای و بی‌نیاز از کتابخانه‌های جانبی می‌پردازیم.
پیش نیازهای طراحی سایت ریسپانسیو با CSS
اولین چیزی که برای شروع طراحی سایت واکنش‌گرا باید آن را به خوبی درک کنید، Viewport است. به طور خلاصه، Viewport یک نمایشگر مجازی است که در مرورگرهای موبایل ایجاد می‌شود و سایت در این فضا رندر می‌شود. برای ساخت یک سایت واکنش‌گرا ابتدا باید به مرورگر بگویید که ابعاد این نمایشگر مجازی را هم عرض موبایل قرار دهد. در غیر این صورت، مرورگر فرض می‌کند که سایت شما ریسپانسیو نیست و سایتتان در ابعاد یک نمایشگر بزرگ رندر و سپس کوچک‌نمایی می‌شود.
- اگر با جزئیات 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 اولویت خاصی ندارد و اگر قبل از حالت پیش‌فرض بیاید اثرگذاری خود را از دست می‌دهد.
طراحی سایت واکنش گرا پیشرفته
نکات تخصصی زیادی برای طراحی سایت واکنش‌گرا وجود دارد. اگر می‌خواهید به طور تخصصی این موضوع را دنبال کنید، مطالب زیر برای شماست:
ادامه دارد...