خانه / آموزش / آموزش تحت وب / آموزش ریسپانسیو کردن سایت

آموزش ریسپانسیو کردن سایت

در این آموزش مبتدی و ساده به شما عزیزان نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو برای پاسخگویی در دستگاه هایی مانند: تبلت ، موبایل ، آی پد وغیره ساخت.

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

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم.

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

بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.

 

“تمام کد های زیر برای این آموزش نوشته شده و برای مثال زدن است”

 

 

متا تگ viewport ، تگ خیلی مهمی برای کار کردن با طراحی ریسپانسیو است.

ما اندازه را برابر یک کردیم، بنابراین پیکسل ها در صفحه نمایش به خوبی نمایش داده میشوند.

همچنین ما از برای نسخه های IE پایین تر از 9 فایل هایی را فرخوانی کردیم که موجب شناخت مرورگر از عناصر HTML5 و همچین media queries میشود.

  • برای اطلاع بیشتر در مورد متا تگ viewport به Mozilla Developer جستوجو کنید.
  • برای اطلاع بیشتر در مورد متا تگ X-UA-Compatible به Stackoverflow و MSDN Microsoft جستوجو کنید.
  • برای اطلاع بیشتر در مورد پشتیبانی نشدن عناصر HTML5 در IE به آپارنت جستوجو کنید.

(اگر از جستوجو نتیجه ای نگرفتید، در صورت درخواست مطالب بالا اطلاع رسانی میشوند)

 

بلاک های محتوای اصلی

کل سند اصلی تشکیل شده از یک دایو با تعداد زیادی تگ section در داخل خودش.

تگ header شامل عکس من, آدرس ایمیل, و دیگر اطلاعات مهم است.

بعد از قراردادن تگ header بقیه سند را نیز مانند زیر وارد میکنیم.

 

حالا در فایل استایل کدهای زیر را قرار میدهیم.

 

تا اینجا طراحی سایت ما مانند یک سایت معمولی بود.

به فایل responsive.css میرویم و کدهای زیر را قرار میدهیم.

 

در کد بالا ما کدهایی که مربوط به نمایشگرهایی که بیشترین عرضشان 740px است را قرار دادیم.

همه چیز واضح است. کدهای دیگر را نیز مانند زیر قرار میدهیم.

کارمان به اتمام رسید.

این بود یک طراحی ریسپانسیو.

اگر سوالی دارید در قسمت نظرات یا در انجمن مطرح کنید.

در این آموزش مبتدی و ساده به شما عزیزان نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو برای پاسخگویی در دستگاه هایی مانند: تبلت ، موبایل ، آی پد وغیره ساخت. اگر قالب شما ریسپانسیو باشد و بازدید کننده با (دستگاه هایی که در بالا گفته شده) وارد سایت شما شود از ظاهر سایت شما راضی و اذیت نمی شود این خودش به تنهایی یک امتیاز برای جذب کاربر برای شما هم می باشد، در آخر میتونیم بگیم قالب واکنش گرا بسیار خوش اخلاقه و خودشو با هر شرایطی سازگار میکنه. صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما…

بررسی کلی

امتیاز کاربر: اولین نفر باشید.

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

با درود و عرض ادب خدمت شما کاربر عزیز، از این که رسانـه پـی فـور را انـتخاب کرده اید سپاسگذاریم، رسانـه پـی فـور برای رفع نیاز و خدمت به شما در سال 1394 بوجود آمده است، به امید روزی بی نیاز....



دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

چهارده + 19 =

ads