031- 344 500 60

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

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

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

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

آموزش  کدهای طراحی سایت رسپانسیو 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. یاشار تبعیدی گفت:

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

*    

*