تا %60 تخفیف خرید برای 8 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟

Responsive ITPRO

سلام به دوستان آی تی پرو، امروز میخواهیم در ادامه آموزش های CSS سراغ بحث Responsive Layout بریم و با هم یاد بگیریم.

Responsive یا واکنشگرا چیست؟ در ابتدای پیدایش صفحات وب، صفحات ساده و دارای یک اندازه ثابت بودند، صفحات با توجه به بزرگ بودن یا کوچک بودن هیچ واکنش خاصی را انجام نمی دادند. اما از زمانی که وبگردی با موبایل و تبلت مرسوم شد این مشکل واقعا خودش را نشان داد. با پیدایش نسخه جدید CSS3 این مشکل تا حد زیادی رفع گردید.

اصول واکنشگرایی چیست؟

المنت های صفحات وب با توجه به اندازه صفحه اندازه خودشان را به صورت درصدی افزایش یا کاهش می دهند. برای مثال اندازه عرض یک تگ اگر ١٠٪ باشد در نمایشگرهای مختلف نمی تواند یک عدد ثابت باشد. برای مثال اگر همین تگ را در یک نمایشگر با عرض 100px مشاهده کنیم اندازه 10px از صفحه نمایش را اشغال کند اما در یک نمایشگر با عرض 1000px اندازه به 100px تغییر می کند.


در این چند قسمت می خواهیم با مفاهیمی چون:

  1. View Port
  2. Grid View
  3. Media Query
  4. Images Responsive
  5. Video Responsive
  6. Frame Works

آشنا می شویم. با من همراه باشید.

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند
تنظیمات حریم خصوصی
تائید صرفنظر