طراحی سایت با طراحی وب واکنشی بخش دوم: جداول شناورReviewed by Datacss.ir on Oct 26Rating:

طراحی سایت با طراحی وب واکنشی بخش دوم: جداول شناور

 

بعد از یادگیری مفاهیم اولیه در بخش قبلی، حال می توانیم سراغ مفهوم Fluid Grid برویم و آن را باهم بیاموزیم. در این روش با استفاده از واحد های نسبی (Relative Units) به جای واحد های ثابت مانند: px, cm, mm و… سعی می کنیم ساختار قالب وب سایت نسبت به اندازه صفحه نمایشی که در آن نمایش داده می شود تغییر خواهد کرد. به عبارتی با تغییر اندازه صفحه نمایش، سایت کوچکتر یا بزرگتر می شود.

برای شروع ساختار زیر را در نظر بگیرید:

یک صفحه ساده با اندازه کلی ۹۶۰px

منو اصلی در سمت چپ با اندازه ۲۱۵px و فاصله از اطراف با اندازه ۲۰px

مطالب اصلی در سمت راست با اندازه ۶۸۵px و فاصله از اطراف با اندازه ۲۰px

بخش کناره به اندازه ۲۱۵px در داخل بخش مطالب اصلی و فاصله از اطراف با اندازه ۲۰px

برای رسیدن به Fluid Grid باید ابتدا تمامی اندازه ها را به اندازه های نسبی تبدیل کنیم. در این بخش از % درصد استفاده می کنیم. برای مثال: width: 90% به این معنی است که طول المنت ما نود درصد طول پدر خود را پر کند. برای تبدیل تمامی اندازه المنت به مقادیر نسبی میتوانید از فرمول زیر استفاده کنید:

هدف ÷ پدر * ۱۰۰ = درصد

حال این فرمول را به کار میگیریم و مقادیر را محاسبه می کنیم:

منو اصلی:

۲۱۵/۹۶۰ × ۱۰۰ = ۲۲٫۳۹۵۸۳۳۳۳۳۳%

مطالب اصلی:

۶۸۵/۹۶۰ × ۱۰۰ = ۷۱٫۳۵۴۱۶۶۶۶۶۷%

بخش کناره:

۲۱۵/۶۸۵ × ۱۰۰ = ۳۱٫۳۸۶۸۶۱۳۱۳۹%

فاصله منو اصلی و مطالب اصلی از اطراف:

۲۰/۹۶۰ × ۱۰۰ = ۲٫۰۸۳۳۳۳۳۳۳۳%

فاصله بخش کناره از اطراف:

۲۰/۶۸۵ × ۱۰۰ = ۲٫۹۱۹۷۰۸۰۲۹۲%

 

توجه داشته باید که برای محاسبه مقادیر “بخش کناره ” و “فاصله بخش کناره از اطراف” مقدار پدر را در فرمول ۶۸۵ یعنی مقدار عرض بخش مطالب اصلی قرار دادیم چون بخش کناره طراحی سایت در داخل بخش مطالب اصلی قرار دارد در نتیجه طول آن نسبت به این المنت محاسبه می شود.

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

در بخش بعدی به بررسی نحوه استفاده از Media Queries ها خواهیم پرداخت.

منبع

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

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست