آموزش کدهای طراحی سایت واکنش گرا,در آموزش امروز با آموزش کدهای طراحی سایت رسپانسیو قسمت ساید بار سایت از تیم وب یار در خدمت شما هستیم,در این آموزش میخواهیم به شما آموزش دهیم که چگونه شما یک وب سایت ریسپانسیو داشته باشید که ساید بار آن نیز ریسپانسو باشد و در صورت تغییر در اندازه و نوع صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده شود .
اولین موضوع در طراحی ریسپانسو این است که خروجی قالب خود را در حداقل سه دستگاه متفاوت مثل کامپیوتر یا لپ تاپ,گوشی موبایل و تبلت در نظر بگیرید.
آموزش طراحی سایت ریسپانسیو
آموزش ریسپانسیو واکنش گرا ساید بار:
با توجه به تصویر بالا خب مشخصه که قسمت فوتر سایت در قسمت پایین صفحه همیشه قرار میگیره,اما ساید بار سایت متحرکه و با توجه به اندازه صفحه در قسمت های مختلفی میتونه قرار بگیره.
انتقال ساید بار به پایین سایت در صفحه نمایش های کوچک:
حالا میخواهیم بررسی کنیم که در صفحه نمایش های کوچک چگونه ساید بار را به قسمت پایین منتقل کنیم. یکی از روشهای رایج برای انجام این کار استفاده ازخاصیت @media در فایل style.css پوسته است.کد زیر را در نظر بگیرید.در این کد نحوه استفاده از این خاصیت را به شما نشان دادیم:
این کد برای صفحه نمایش هایی که عرض حداکثر ۹۶۰ دارند اجرا خواهد شد. برای صفحه نمایش های کمتر از این مقدار یا سایر مقادیر دیگه هم عرض صفحه نمایش خود را تغییر دهید. به عنوان مثال شما میتونید برای قسمت ساید بار سایت خودتان از کد زیر استفاده کنید:
همانطور که در کد بالا مشاهده میکنید. برای عرض کمتر از ۹۶۰ ساید بار شما در قسمت راست قرار میگیرد,و از سمت چپ ۴۳ px فاصله میگیرد. این نمونه کد میتواند برای صفحه نمایش با عرض متفاوت تر از این همانند موبایل تغییر کند. برای نمایش ریسپانسیو ساید بار در موبایل میتوانید از کد زیر استفاده کنید:
همینطور که از این آموزش متوجه شدیم خاصیت @media اندازهء صفحه نمایش دستگاهی که سایت با آن باز شده را تشخیص میدهد و شما با استفاده از این خاصیت میتوانید برای صفحه نمایش های مختلف طراحی ها و اندازه های مختلف داشه باشید.
سخن پایانی:
در این مقاله با آموزش کدهای طراحی سایت رسپانسیو Rsponsive در خدمت شما مخاطبین گرامی بودیم.در آموزش های بعدی از تیم وب یار نکات مفید دیگری در خصوص طراحی رسپانسیو سایت,و آموزش کدهای طراحی ریسپانسیو سایت در اختیار شما قرار میدهیم.
