close
خرید vpn
اموزش ریسپانسیو قالب

اموزش ریسپانسیو قالب

رزرو تبلیغــات

تعرفه تبلیغات
http://up.pcast.ir/view/1905304/147565193282231.giff

شمـا میتوانیــد برای دیافت آخرین مطالب و آگاهی از آخریـن اخبــار موزیـک در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

اموزش  ریسپانسیو قالب

اموزش  ریسپانسیو قالب به ادامه مطالب بروید

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

اما به بعضی سایت ها بروید( با سیستم های مختلف ) میبینید که قالب ها به صورت کاملا متفاوت اما زیبا و کار آمد برای شما پخش خواهد شود و این نشانه ریسپانسیو بودن قالب سایت میباشد. 
آموزش ریسپانسیو کردن: 
خب ابتدا میتوانید قالب خود را طبق معمول کدنویسی کنید و بر روی سایت اجرا کنید برای ریسپانسیو کردن استایل و متن زیر را قبل از تگ قرار میدهید. 


کد:

کد</a>" rows="10"><!--[if it IE9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> <style> @media screen and (max-width: 980px) { } @media screen and (max-width: 650px) { } @media screen and (max-width: 480px) { } </style> 



حال به تعریف این کد میپردازیم با اضافه کردن کد قالب هیچ تغییری نکرده و مقدمه اموزش ما است. 
میبینید که کد از سه کد (عنوان) درست شده که هر سه تا اندازه متفاوتی دارد 
در کد اولی که اندازه 980 رو به خودش گرفته است یعنی اگر قالب از این اندازه کوچک تر شد استایل هایی که در بین این عنوان یا تگش قرار میگیرد اعمال شود برای مثال میگوید قالب ما ستونش اندازه 250 پیکسل دارد ولی وقتی از این اندازه رد شد به 240 تبدیل شود. 
در دومی میگوید اگر از 680 پایین تر امد کاره بالا انجام شود یعنی یک تغییر جدید 
و در سومی نیز همین طور قابل توجه که 980 اندازه لب تاب 650 تبلت و 480 موبایل مباشد 
کدنویسی درون تگ ها و اصل ریسپانسیو: 
این قسمت اموزش را , در هر سه انجام دهید که ما فقط یکی را توضیح خواهیم داد 
ابتدا لیست کلاس و ایدی های دایو یا تگ های اصلی که بیشتر همان دایو هست را جمع آوری کنید 
برای مثال کلاس و ای دی های هدر لوگو منو ستون دایو قبل ستون و..... 
بعد از جمع اوری همه را در تگ بذارید مانند زیر: 


کد:

@media screen and (max-width: 980px) { heder mani right و.... } 



بعد اگر اسم مورد نظر ایدی هست علامت # را قبل حرف و اگر کلاس است علامت . را قبل آن به کار برید مثل کد زیر: 


کد:

@media screen and (max-width: 980px) { #heder .mani .right و.... } 



خب حال برای هر اسم دو علامت { } باز کنید که دستورات در میان آنها نوشته میشود 
{ دستورات ریسپانسیو یا استایل } 
خب حال دستورات را در همه به این شکل اصافه کنید: 


کد:

@media screen and (max-width: 980px) { #heder { float:none; width:100%; } .mani { float:none; width:100%; } .right { float:none; width:100%; } } 



حال به توضح تگ ها میپردازیم باید بگم که هر استایلی میتوانید اضافه کنید ولی در 90 درصد از ریسپانسیو ها فقط این استایل ها رو میدهند اگر بخواهید زیبا تر کنید قالب خود را در ریسپانسیو استایل دیگر اضافه میکنید که در ادامه اشنا خواهیم شدتوضیح دستور اول 
به قالب که تشکیل از خاصیت اولی یعنی فلوت است که آن را قسمت none میذاریم این قسمت میگوید که ستون با کوچک شدن در اندازه صفحه قرار گیرد که میتوانید ب تغییر این استایل مسیر و جای کلی ستون ها یا هر بخش را انتخاب کنید.توضیح دستور دوم 
دستور دوم که width نام دارد نیز عرض ستون را مشخص میکند که ما 100 درصد یعنی به اندازه پنجره انتخابی انتخاب میشود یعنی اگر قالب با عرض 100 بود عرض ستون هم 100 شود برای این استایل میتوانید از پیکسل یا انداز های دیگر هم استفاده کنید. 
علاوه بر این استایل ها میتوانید استایل های انتخابی ک دلخواه هست و برای زیبا شدن ریسپانسیو هست اجرا کنید مثلا استایل عنوان ستون شما (سمت راست) 
.rr-bar 
میباشد برای این موقع این استایل رو اضافه میکنید در تگ عنوان اصلی ریسپانسیو 


کد:

@media screen and (max-width: 980px) { #heder { float:none; width:100%; } .mani { float:none; width:100%; } .right { float:none; width:100%; } .rr-bar { float:none; width:250px; color:#000; و.... } } 



و به همین ترتیب ادامه میدهیم 
اگر آموزش را نفهمیده اید لطفا دوباره آموزش را بخوانید و اگرم باز یاد نگرفته اید در نظرات اعلام کنید تا سری دوم به صورت کامل تر قرار داه شود و اگر یاد گرفتید اید برای تشکر نظر بدهید


تاریخ انتشار : پنجشنبه 19 شهريور 1394 ساعت: 20:53 | نظرات()
برچسب ها : , , , , , , , ,

نویسنده :

بازديد : 35

موضوع: اموزش ها ,

مطالب مرتبط
بخش نظرات این مطلب
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
با کلیک بر روی 1+ ما را در گوگل محبوب کنید