031- 344 500 60

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

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

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

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

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

درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان

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

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20

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

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

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

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

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

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

طراحی سایت آموزشی AZ کنکور یکی از نمونه کارهای طراحی سایت وب یار، طراحی سایت آموزشی AZ کنکور می باشد که زمینه ی کاری آن مشاوره تحصیلی، برگذاری کلاس های آنلاین، آزمون آنلاین و فروش محصولات آموزشی است. اصول سئو در کدنویسی طراحی سایت AZ کنکور رعایت شده است همچنین در طراحی گرافیک قالب سایت […]

ارسال دیدگاه

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

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

*    

*    

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

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

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

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