آموزش قدم به قدم طراحی یک صفحه وب رسپانسیو

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

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

کار رو در ۴ مرحله انجام میدیم , برووووووو بریم:

مرحله اول: ایجاد ساختار html مورد نظر

مرحله دوم: افزودن دستورات Css برای ایجاد استایل غیر رسپانسیو

در دستورات بالا max-wdith رو پیکسل دادیم که حداکثر سایز رو مشخص میکنه ولی width رو به صورت درصد دادیم تا یک حالت ارتجاعی برامون پیش بیاد و سایت توی چندین پیکسل بزرگ یا کوچیک شدن کش بیاد و ارتجاع داشته باشه 😀

مرحله سوم: افزودن مدیا کوئری در انتهای فایل css برای ایجاد ساختار رسپانسیو

مرحله چهارم: افزودن دستور viewport در head صفحه برای نمایش استاندارد صفحه ی رسپانسیو در گوشی های موبایل و تبلت ها

دستور viewport رو اگه بخوایم به صورت خیلی ساده توضیح بدیم میشه اینجوری گفت که این دستور باعث میشه که عرض مرورگر در حالتی که مرورگر تمام صفحه (عرض مرورگر ۱۰۰ درصد صفحه رو پوشانده) برابر با عرض دستگاه (گوشی موبایل) در نظر گرفته بشه.

خب کار تموم شد 😀 میتونید پیش نمایش رو از اینجا ببینید(کلیک کنید). برای اینکه رسپانسیو بودن رو تست کنید میتونید اندازه عرض مرورگر خودتون رو کوچیک و بزرگ کنید تا ببینید محتوا چجوری خودشو با توجه به سایز عرض صفحه تغییر میده.

امیدوارم که این آموزش ساده بدردتون بخوره و بتونید توی پروژه های خودتون از این اموزش استفاده کنید. هرگونه سوال یا مشکلی دارید از بخش نظرات مطرح کنید تا مشکلات رو رفع کنم و به سوالات پاسخ بدم. موفق و پیروز باشید. 😀

نمونه ی ساده ی قالب رسپانسیو
نمونه ی ساده ی قالب رسپانسیو
simple-responsive-design.zip
Version: 1.0
1.6 KiB
25 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟