آنچه در این مطلب می‌خوانید :
ریسپانسیو یا ?
ریسپانسیو به معنی واکنش گرا است و اگر به طور ساده بخواهیم مفهوم ریسپانسیو را در وب بگوییم
یعنی زمانی که شما با کامپیوتر خانگی یا لبتاپ یک وبسایت را باز میکنید وبسایت را با یک ظاهر مشاهده کنید
و اگر با گوشی یا تب لت وبسایت را باز کردید به یک شکل متفاوت دیگر وبسایت را مشاهده کنید.
یک مثال ساده :
این تصویری است که زمان نمایش یک وبسایت با تبلت گرفته شده است به منوی سایت دقت کنید :
و این تصویری است که هنگام نمایش همان سایت با گوشی گرفته شده است و دوباره به منو دقت کنید :
در واقع در تصویر بالا میشود مفهوم واکنش گرایی یا به عبارتی ریسپانسیو (responsive) را توضیح داد ، به طور کامل یعنی هر المانی که شما در صفحه میبینید هنگام مشاهده سایت با هر ابزاری باید تغییر کند و ظاهر مناسبی را داشته باشد تا کاربر بتواند به ساده ترین شکل ممکن با سایت کار کند. اما ریسپانسیو فقط در صفحات وب بکار نمیرود و در تولید app ها و… هم باید کاربرد داشته باشد.
چک کردن ریسپانسیو بودن سایت
اما به ساده ترین شکل ممکن شما میتوانید متوجه این بشوید که آیا قالب وبسایت شما ریسپانسیو است یا خیر :
- فایر فاکس را باز کرده و ادرس وبسایت خود را در ادرس بار مرورگر فایر فاکس وارد کنید . صبر کنید تا به طور کامل وبسایت بارگذاری شود سپس کلید های میانبر ctrl + shift+ m را همزمان نگه دارید سپس شما میتوانید وبسایت خود را در سایز های مختلف از جمله تبلت و گوشی مشاهده کنید.
- در مرورگر کروم همان کار ها را انجام دهید ولی کلید میانبر را نزنید سپس روی یک نقطه از وبسایت کلیک راست کنید و گزینه inspect را انتخاب کنید و یک آبکون گوشی در سمت چپ وجود دارد روی آن کلیک کنید و سپس سایت خود را در سایز گوشی مشاده کنید .
نکته : در غیر این صورت با گوشی و تبلت سایت خود را مشاده کنید اگر مانند pc بود سایت شما ریسپانسیو نیست.
یک کد ساده برای ریسپانسیو کردن سایت با استفاده از css :
اگر شما کمی با css آشنایی دارید با استفاده از این کد که میگویید گر صفحه از سایز 600 کوچکتر بود المان body را با این استایل نشان بده استفاده کنید و بجای المان بادی یا پایین آن میتوانید کلاس ها آی دی ها و تگ های خود را بکار ببرید .
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
امیدوارم که از این آموزش لذت برده باشید و با مفهوم ریسپانسیو آشنایی پیدا کرده باشید.
