no-img
دیزاینر

آموزش ریسپانسیو کردن قالب با CSS


دیزاینر
مطالب ویژه
اطلاعیه های سایت

adsads
گزارش خرابی لینک
اطلاعات را وارد کنید .

ادامه مطلب

آموزش ریسپانسیو کردن قالب با CSS
امتیاز 4.75 ( 4 رای )
zip
فروردین ۶, ۱۳۹۴

آموزش ریسپانسیو کردن قالب با CSS


responsive

در این پست قصد داریم به شما آموزش بدیم که چطور میتونید قالبی که ساختید رو با ترفندی از CSS با نام Media Queries ، ریسپانسیو یا واکنش گرا کنید. مزیت این کار اینه که سایت شما در دستگاه های دیگری که امکان وب گردی رو دارن ، زیبا و خوانا باشه. و این کار نیاز به کدنویسی داره که در این پست ، این کار رو با هم مرور میکنیم. فقط توجه داشته باشید که کلاس ها و آی دی هایی که در این پست میبینید ، فرضی هستند.

قدم اول : ساخت قالب

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

قدم دوم : ساخت یک فایل CSS جدید

حالا با استفاده از یک ادیتور مثل Adobe Dreamweaver یا Microsoft Expression Web 4 ، یک فایل CSS جدید ایجاد میکنیم ( نام مهم نیست ) سپس وارد مرحله اصلی میشیم. در این بخش ، شما باید برای هر اندازه یک استایل جداگانه با media query در فایل CSS خود بنویسید.

قدم سوم : نوشتن Media Queries

حالا نوبت به کار اصلی رسیده ، باید در اینجا با Media Query ، یه جور شرط در CSS بنویسیم. مثل نمونه :

 

حالا به توضیح کد بالا میپردازیم. کد بالا استایل برای صفحاتی با طول کم تر از ۹۸۰px رو مشخص میکنه.

در واقع کد بالا به زبان ساده میشه : اگر طول صفحه کوچک تر از ۹۸۰ پیکسل بود ، این استایل ها را اعمال کن.

خب حالا باید استایل ها رو به شکل عادی بنویسیم مثل نمونه زیر :

 

حالا باید برای اندازه های دیگری هم این کار رو انجام بدیم. ما به شما توصیه میکنیم که برای ۶۵۰px و ۴۸۰px هم این کار رو انجام بدید. فقط توجه داشته باشید که در این اندازه ها ، باید بخش های بلوک ها و پست ها ، قابلیت float ( شناور بودن ) خودشون رو از دست بدن و بلوک ها در زیر پست ها ظاهر بشن. برای این کار هم میتونید مثل حالت عادی استایل بنویسید. به نمونه دقت کنید :

 

البته تموم کلاس هایی که در کد بالا میبینید ، فرضی هستن مثل menu-mini ، manager-message و …

قدم چهارم : رفع مشکلات احتمالی

چون بعضی از تبلت ها و موبایل ها هنگام وبگردی ، در اندازه فونت ها و صفحه تغییر ایجاد میکنن ، باید این مشکلات رو رفع کرد.

برای کشیده نشدن صفحه در گوشی های iPhone از کد زیر استفاده کنید :

 

و چون مرورگر Internet Explorer 8 از این روش برای ریسپانسیو سازی صفحه پشتیبانی نمیکنه ، کافیه کتاب خونه زیر رو به صفحه زیر اضافه کنید :

 

قدم پنجم : پیوند دادن به استایل ها

با استفاده از تگ link در HTML و با قرار دادن خاصیت rel بر روی stylesheet و href بر روی آدرس فایل ، به فایل CSS در قالب پیوند دهید . مانند نمونه :

 



موضوعات :
آموزش , وردپرس
ads

درباره نویسنده

Admin 183 نوشته در دیزاینر دارد . مشاهده تمام نوشته های

دیدگاه ها


5 پاسخ به “آموزش ریسپانسیو کردن قالب با CSS”

  1. Hamidreza گفت:

    آقا سلام دمت گرم ناموسا خیلی با آموزشت حال کردم

  2. خرید فالوور اینستاگرام گفت:

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

  3. A.R.D.A.Z گفت:

    سایت مضخرف با محتویات چرتی داشتی.

  4. حسین نعمتی گفت:

    سلام وقت بخیر

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

    شما انجام میدید؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *