031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » آموزش کدهای طراحی سایت رسپانسیو Rsponsive

آموزش کدهای طراحی سایت رسپانسیو Rsponsive

۲۸ام دی ۱۳۹۴
پشتیبانی وب یار
62

آموزش  کدهای طراحی سایت رسپانسیو Rsponsive

آموزش کدهای طراحی سایت واکنش گرا

آموزش کدهای طراحی سایت واکنش گرا,در آموزش امروز با آموزش کدهای طراحی سایت رسپانسیو قسمت  ساید بار سایت از تیم وب یار در خدمت شما هستیم,در این آموزش میخواهیم به شما آموزش دهیم که چگونه شما یک وب سایت ریسپانسیو داشته باشید که ساید بار آن نیز ریسپانسو باشد و در صورت تغییر در اندازه و نوع صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده شود .

در صورتی که به طراحی ریسپانسیو علاقه دارید,مطلب آموزش طراحی منو ریسپانسیو را بخوانید.

اولین موضوع در طراحی ریسپانسو این است که خروجی قالب خود را در حداقل سه دستگاه متفاوت مثل کامپیوتر یا لپ تاپ,گوشی موبایل و تبلت در نظر بگیرید.

آموزش کدهای طراحی سایت ریسپانسیو

آموزش طراحی سایت ریسپانسیو

آموزش ریسپانسیو واکنش گرا ساید بار:

با توجه به تصویر بالا خب مشخصه که قسمت فوتر سایت در قسمت پایین صفحه همیشه قرار میگیره,اما ساید بار سایت متحرکه و با توجه به اندازه صفحه در قسمت های مختلفی میتونه قرار بگیره.

انتقال ساید بار به پایین سایت در صفحه نمایش های کوچک:

حالا میخواهیم بررسی کنیم که در صفحه نمایش های کوچک چگونه ساید بار را به قسمت پایین منتقل کنیم, یکی از روشهای رایج برای انجام این کار استفاده ازخاصیت @media در فایل style.css پوسته است.کد زیر را در نظر بگیرید,در این کد نحوه استفاده از این خاصیت را به شما نشان دادیم:

media (max-width: 960px) { #pgwrap .sidebar { float: none; margin-left: 0; width: auto; }

 

این کد برای صفحه نمایش هایی که عرض حداکثر ۹۶۰ دارند اجرا خواهد شد,و برای صفحه نمایش های کمتر از این مقدار یا سایر مقادیر دیگه هم عرض صفحه نمایش خود را تغییر دهید.به عنوان مثال شما میتونید برای قسمت ساید بار سایت خودتان از کد زیر استفاده کنید:

@media (max-width: 960px) { #pgwrap .sidebar{ Float: right; Margin-left: 33px Width: auto; }}

همانطور که در کد بالا مشاهده میکنید , برای عرض کمتر از ۹۶۰ ساید بار شما در قسمت راست قرار میگیرد,و از سمت چپ ۴۳ px فاصله میگیرد.این نمونه کد میتواند برای صفحه نمایش با عرض متفاوت تر از این همانند موبایل تغییر کند,برای نمایش ریسپانسیو ساید بار در موبایل میتوانید از کد زیر استفاده کنید:

@media (max-width: 320px) {#pgwrap .sidebar {padding: 0;}}

 

همینطور که از این آموزش متوجه شدیم خاصیت @media اندازهء صفحه نمایش دستگاهی که سایت با آن باز شده را تشخیص میدهد و شما با استفاده از این خاصیت میتوانید برای صفحه نمایش های مختلف طراحی ها و اندازه های مختلف داشه باشید. در آموزش های بعدی از تیم وب یار نکات مفید دیگری در خصوص طراحی رسپانسیو سایت,و آموزش کدهای طراحی ریسپانسیو سایت در اختیار شما قرار میدهیم.

آموزش کدهای طراحی سایت رسپانسیو Rsponsive
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی عرضه تخمه

طراحی سایت فروشگاهی عرضه تخمه طراحی سایت اختصاصی طعم آفرین بهاران عرضه کننده انواع تخمه های کدو / هندوانه و آفتابگردان وارداتی در اصفهان  از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاهی طعم آفرین بهاران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه […]

طراحی سایت خدماتی

طراحی سایت خدمات پزشکی اصفهان سمعک

طراحی سایت خدمات پزشکی اصفهان سمعک طراحی سایت اختصاصی اصفهان سمعک میلاد عرضه کننده انواع سمعک ها در اصفهان ، ارائه دهنده کلیه خدمات شنوایی سنجی در اصفهان از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت خدمات پزشکی اصفهان سمعک میلاد برای مشتریان عزیزی که کسب و کارشان در حوزه […]

ارسال دیدگاه

  1. یاشار تبعیدی گفت:

    درودها برشما ودوستانی که زحمت برای چنین مطالب مفید کشیده اند .
    بسیار بسیار جالب وکارگر بوده کارتان .
    سپاسها .

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید