وب بر روی انواع مختلف از دستگاه ها قابل دسترسی است، از یک موبایل با صفحه کوچک تا یک تلویزیون با صفحه خیلی بزرگ! هر دستگاه برای کاری ساخته شده و مزیت‌ها و محدودیت‌های خودش را دارد. به عنوان یک طراح سایت، این وظیفه شماست که همه این دستگاه‌ها را پشتیبانی کنید و سایتی طراحی کنید که بر روی همه سایز صفحه خوب کار کند و قابل استفاده باشد.اگر از یک سایت ساز استفاده نمی‌کنید، برای تبدیل سایت خود به طراحی responsive یا واکنش‌گرا باید مراحل زیر برید.
در اینجا به شما توضیح خواهیم داد چطور یک سایت با کدنویسی و طراحی قدیمی را به یک سایت واکنش‌گرا تبدیل کنید.
لازم است بدونید اگر سایت شما با کاموا طراحی شده، به این راهنما نیازی ندارید چون همه سایت‌های طراحی شده با کاموا به صورت پیش فرض ریسپانسیو است.
قدم اول: اضافه کردن viewport
حتی برای یک صفحه ساده نیز شما باید متا تگ viewport اضافه کنید. این مهمترین بخش که برای یک طراحی responsive و بدون آن سایت شما روی موبایل به خوبی کار نخواهد کرد.
viewport به مرورگر شما می‌گوید که این صفحه باید تغییر سایز(scale) دهد تا به اندازه نمایشگر درآید.
<meta name="viewport" content="width=device-width, initial-scale=1">
این تگ باید در بخش <head> سایت شما باشد و فقط یکبار برای هر صفحه نیاز هست که تعریف شود.
قدم دوم: Media queries
برای مثال یک بلاک متن حداقل ۶۰۰px باید عرض داشته باشه. باید توسط media queries حداقل عرض المنت‌ها تایین کنیم.
@media (min-width: 600px) {
}
در مرحله بعد باید یک حداکثر برای عرض هم تایین کنیم. ما برای سادگی از دو viewport یکی خیلی باریک و دیگری عریض استفاده می‌کنیم.این کل پروسه برای ما ساده تر می‌کند.
برای اینکه متن‌های ما به صورت یک خط در صفحه‌های بزرگ در نیایند، باید عرض حداکثر آنها تایین کنیم.برای این کار ما یک div در اطراف متن خود میزاریم و بهش margin: auto میدیم و max-width.
<div class="container">...</div>
<div id="section1">
<div class="container">
<h2>What will I learn?</h2>
برای css
.container {
margin: auto;
max-width: 800px;
}
قدم سوم: کاهش فاصله‌ها و اندازه متن
در یک صفحه نمایش کوچک شما جای زیادی برای نمایش محتوا ندارید پس اندازه و وزن متن باید بسیار کاهش یابد تا در صفحه نمایش کوچکتر جا شوند.
برای صفحه نمایش بزرگتر باید فرض کنیم که کاربر با فاصله بیشتری از صفحه نمایش هست. برای خوانا بودن محتوا باید اندازه و وزن متن ها بیشتر شوند و فاصله‌ها افزایش یابند.برای مثال زیر ما فاصله از دو طرف را با % مشخص کردیم که بر اساس اندازه صفحه نمایش تنظیم میشود.
قدم چهارم:float
در صفحه نمایش‌های کوچک، باید المنت‌ها را بالا پایین یکدیگر نمایش داد. برای استفاده بهینه از نمایشگرهای عریض، المنت‌ها را با float در کنار یکدیگر قرار میدهیم.
#headline #blurb {
float: left;
font-weight: 200;
width: 50%;
font-size: 18px;
box-sizing: border-box;
padding-right: 10px;
}
#headline #register {
float:right;
padding: 20px;
width: 50%;
box-sizing: border-box;
font-weight: 300;
}
#headline br {
clear: both;
}
برای عرض المنت‌ها بهتر است از ٪ استفاده کنیم و در درون media query مناسب آن قرار دهیم. به مثال زیر توجه کنید
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
background: red;
}
}
معنی این css این هست که اگر صفحه نمایش عرض بین ۳۲۰ تا ۴۸۰ دارد، رنگ پیش زمینه قرمز کن.
برای طراحی سایت واکنش‌گرا راه راحت‌تری هم هست. سایت خود را با کاموا طراحی کنید. تمام سایت های کاموا به صورت پیش فرض ریپانسیو هستند!
خیلی خوب بود ممنون
سلام.خواستم بابت وبسایت خوبتون ازتون تشکر
کنم و امیدوارم باعث ایجاد انگیزه براتون بشه
سلام
همین که مقالات ما بتونه کمکی به شما در بهبود کسب و کارتون بکنه خودش باعث انگیزه ما می شه
به امید موفقیت های بیشتر برای شما
سلام.خواستم بابت وبسایت خوبتون ازتون تشکر کنم و امیدوارم باعث ایجاد انگیزه براتون بشه
مطالب بسیار زیبا و ارزشمندی دارید ممنونم
سلام ممنون از سایت خوبتون و مقالات خوبترش.
من سایتم رو با وردپرس طراحی کردم و همه چیزش درست هست … اما طراحی رسپانسیوش مشکل داره و واکنش گرا نیست … این توضیحاتی که دادید فکر میکنم مربوط به بخش کدنویسی بود اگه میشه راجب cms هم راهنمایی کنید … ممنون