چیدمان سیال (Fluid Layout) چیست؟

طرح‌بندی سیال نوعی طراحی صفحه وب (Webpage) است که در آن با تغییر اندازه پنجره (Window)، اندازه صفحه تغییر می‌کند. این کار با تعریف مناطق صفحه با استفاده از درصد به جای عرض پیکسل (Pixel) ثابت انجام می‌شود.

اکثر طرح‌بندی‌های صفحه وب شامل یک، دو یا سه ستون هستند. در روزهای اولیه طراحی وب سایت (Web Design)، زمانی که اکثر کاربران اندازه صفحه نمایش مشابهی داشتند، توسعه دهندگان وب ستون ها را با عرض ثابت تعیین می کردند. به عنوان مثال، یک طرح‌بندی ثابت ممکن است شامل یک منطقه محتوای اصلی با عرض 960 پیکسل با سه ستون با عرض 180، 600 پیکسل و 180 پیکسل باشد. در حالی که این چیدمان ممکن است در یک صفحه نمایش 1024x768 عالی به نظر برسد، ممکن است در صفحه نمایش 1920x1080 کوچک به نظر برسد و در صفحه نمایش 800x600 مناسب نباشد.

طرح بندی های سیال این مشکل را با استفاده از درصد برای تعریف هر ناحیه از طرح بندی حل می کنند. . به عنوان مثال، به جای ایجاد یک منطقه محتوا با 960 پیکسل، یک توسعه وب (Web Development) می تواند طرحی ایجاد کند که 80 درصد صفحه را پر می کند و سه ستون به ترتیب می توانند 18، 64 و 18 درصد را اشغال کنند. با استفاده از درصد، محتوا می تواند بزرگ یا کوچک شود تا با پنجره رایانه کاربر سازگار شود. ورق سبک آبشاری (CSS) مورد استفاده برای ایجاد یک چیدمان ثابت در مقابل یک چیدمان سیال در زیر نشان داده شده است.

طرح بندی ثابت	Fluid Layout
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; }	.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; }

کلاس‌های CSS در مثال‌ها می‌توانند هر کدام به یک div در زبان نشانه گذاری فرامتن (HTML) صفحه اختصاص داده شوند که در آن .left، .right و .middle در .content. کلاس محتوا همچنین می تواند به یک جدول اختصاص داده شود و سایر کلاس ها می توانند به سلول های جدول اختصاص داده شوند. کلاس .content با عرض ثابت نیازی به عرض مشخصی ندارد زیرا به طور خودکار عرض سلول‌های جداول یا سلول‌های جدول را در بر می‌گیرد.

Fluid Layout در مقابل طراحی واکنش‌گرا.

اصطلاحات "طرح بندی سیال" و "طراحی وب سایت ریسپانسیو (Responsive Web Design)" گاهی اوقات به جای یکدیگر استفاده می شوند، اما آنها دو چیز متفاوت هستند. صفحه ای که با استفاده از طراحی وب واکنش گرا ایجاد می شود شامل پرس و جوهای رسانه ای CSS است که بسته به عرض پنجره یا نوع دستگاه مورد استفاده برای دسترسی به صفحه، سبک های مختلفی را بارگذاری می کند. طراحی وب ریسپانسیو به CSS بیشتری (و گاهی جاوا اسکریپت (JavaScript)) نسبت به یک چیدمان معمولی نیاز دارد، اما همچنین کنترل بیشتری بر طرح‌بندی صفحه فراهم می‌کند.

تعریف اصطلاح چیدمان سیال (Fluid Layout) توسط تک بورد

تعریف چیدمان سیال (Fluid Layout) در این صفحه یک تعریف پایه نگاشته شده توسط تک بورد است. اگر مایل به ارجاع به این صفحه یا استناد به این تعریف هستید، با شرط درج لینک به این صفحه می توانید از این محتوا استفاده کنید.

هدف تک بورد توضیح اصطلاحات کامپیوتری به روشی است که به راحتی قابل درک باشد. ما برای سادگی و دقت با هر تعریفی که منتشر می کنیم تلاش می کنیم. اگر بازخوردی درباره تعریف چیدمان سیال (Fluid Layout) دارید یا می‌خواهید یک اصطلاح فنی جدید پیشنهاد کنید، لطفاً با ما تماس بگیرید.

آیا می خواهید اصطلاحات فنی بیشتری یاد بگیرید؟ در خبرنامه روزانه یا هفتگی مشترک شوید و شرایط و آزمون های ویژه را در ایمیل خود تحویل بگیرید.

مشترک شدن