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