٠٨٦٩١٠١٠١٦٩

ریسپانسیو یا responsive

آنچه در این مطلب می‌خوانید :


ریسپانسیو یا ?
ریسپانسیو به معنی واکنش گرا است و اگر به طور ساده بخواهیم مفهوم ریسپانسیو را در وب بگوییم
یعنی زمانی که شما با کامپیوتر خانگی یا لبتاپ یک وبسایت را باز میکنید وبسایت را با یک ظاهر مشاهده کنید
و اگر با گوشی یا تب لت وبسایت را باز کردید به یک شکل متفاوت دیگر وبسایت را مشاهده کنید.
 
یک مثال ساده :
این تصویری است که زمان نمایش یک وبسایت با تبلت گرفته شده است به منوی سایت دقت کنید :
ریسپانسیو با کامپیوتر
و این تصویری است که هنگام نمایش همان سایت با گوشی گرفته شده است و دوباره به منو دقت کنید :
ریسپانسیو با گوشی
در واقع در تصویر بالا میشود مفهوم واکنش گرایی یا به عبارتی ریسپانسیو (responsive) را توضیح داد ، به طور کامل یعنی هر المانی که شما در صفحه میبینید هنگام مشاهده سایت با هر ابزاری باید تغییر کند و ظاهر مناسبی را داشته باشد تا کاربر بتواند به ساده ترین شکل ممکن با سایت کار کند. اما ریسپانسیو فقط در صفحات وب بکار نمیرود و در تولید app ها و… هم باید کاربرد داشته باشد.

چک کردن ریسپانسیو بودن سایت

اما به ساده ترین شکل ممکن شما میتوانید متوجه این بشوید که آیا قالب وبسایت شما ریسپانسیو است یا خیر :

  1. فایر فاکس را باز کرده و ادرس وبسایت خود را در ادرس بار مرورگر فایر فاکس وارد کنید . صبر کنید تا به طور کامل وبسایت بارگذاری شود سپس کلید های میانبر ctrl + shift+ m را همزمان نگه دارید سپس شما میتوانید وبسایت خود را در سایز های مختلف از جمله تبلت و گوشی مشاهده کنید.
  2. در مرورگر کروم همان کار ها را انجام دهید ولی کلید میانبر را نزنید سپس روی یک نقطه از وبسایت کلیک راست کنید و گزینه inspect را انتخاب کنید و یک آبکون گوشی در سمت چپ وجود دارد روی آن کلیک کنید و سپس سایت خود را در سایز گوشی مشاده کنید .

ریسپانسیو کروم
نکته : در غیر این صورت با گوشی و تبلت سایت خود را مشاده کنید اگر مانند pc بود سایت شما ریسپانسیو نیست.
یک کد ساده برای ریسپانسیو کردن سایت با استفاده از css :
اگر شما کمی با css آشنایی دارید با استفاده از این کد که میگویید گر صفحه از سایز 600 کوچکتر بود المان body را با این استایل نشان بده استفاده کنید و بجای المان بادی یا پایین آن میتوانید کلاس ها آی دی ها و تگ های خود را بکار ببرید .
 

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

امیدوارم که از این آموزش لذت برده باشید و با مفهوم ریسپانسیو آشنایی پیدا کرده باشید.
 
 
 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

علی عابدی

علی عابدی

علی عابدی هستم مدیر و موسس فناوران اطلاعات هاستینو : از سال 1390 به صورت تخصصی در حوزه میزبانی وب و طراحی سایت فعالیت دارم و مشتاق یادگیری همیشگی هستم و از علاقه مند به آموزش انچه تجربه کرده ام نیز هستم.
call

همیشه در کنار شما هستیم

بدون نگرانی کسب و کار خود را توسعه دهید؛ دلسوزانه از آن محافظت خواهیم کرد.

line

٠٨٦٩١٠١٠١٦٩

پشتیبانی تلفنی از 9 صبح تا 9 شب همه روزه

هاست میزبانی

سرور مجازی

سرور اختصاصی

دیگر خدمات

نماد ها و مجوز ها

مجموعه فناوران اطلاعات هاستینو با ارائه خدمات میزبانی وب و ثبت دامنه ابتدا با نام و برنددیگری از سال ۱۳۹۰ فعالیت خود را شروع کرد و در سال ١٣٩٦ با تغییر برند خود وتغییراتی در کادر فنی و گسترش مجموعه با نام هاستینو فعالیت خود را ادامه و گسترش داد و علاوه بر خدمات میزبانی و ثبت دامنه با ارائه سرویس های سرور مجازی و سرور اختصاصی تلاش کردیم تا خدمات خود را افزایش و نیاز وب مستران ایرانی را برطرف کنیم و با توسعه واحد طراحی و توسعه وب مجموعه ارائه خدمات طراحی وبسایت و اپلیکیشن را نیز ارائه کرده ایم تا رضایت همیشگی و خدمات رسانی پایداری را به شما عزیزان ارائه کنیم.

تمامی حقوق برای هاستینو محفوظ است . تمامی  خدمات این فروشگاه، دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های سایت هاستینو تابع قوانین و مقررات جمهوری اسلامی ایران است.

طراحی شده توسط واحد توسعه هاستینو | ١٤٠١ – ١٣٩٦

باکس دانلود

لطفا برای دریافت لینک دانلود اطلاعات خواسته شده را وارد نمایید
ستون کناری اسکرول به بالا