+- انجمن استودیو توپو مرجع طراحان و توسعه دهندگان (http://topostudio.ir)
+-- انجمن: انجمن کامپیوتر و اینترنت (http://topostudio.ir/Forum-%D8%A7%D9%86%D8%AC%D9%85%D9%86-%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA)
+--- انجمن: سئو و بهینه سازی سایت (http://topostudio.ir/Forum-%D8%B3%D8%A6%D9%88-%D9%88-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA)
+---- انجمن: آموزش سئو (http://topostudio.ir/Forum-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A6%D9%88)
+---- موضوع: طراحی چیدمان شبکه برای طراحی وب پاسخگو (/Thread-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88)
طراحی چیدمان شبکه برای طراحی وب پاسخگو - hostcode - 2019/07/19
طراحی چیدمان شبکه برای طراحی وب سایت پاسخگو
آموزش طراحی سایت
![[تصویر: %D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%86%DB...%D9%88.jpg]](http://magbot.ir//%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88.jpg)
طراحی پاسخگو، فرآیند تنظیم طرح است به طوری که تمام اطلاعات مهم را در یک روش قابل خواندن در هر نوع دستگاه یا صفحه نمایش ارائه می دهد.
اکثر طراحان یک طرح شبکه مایع را انتخاب می کنند، زیرا ساده تر از طرح بندی های مبتنی بر شبکه در انواع دستگاه ها، طراحی شده است.
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب های وب، مجموعه آیکون ها، تم ها و آژانس های طراحی
مهم است بدانیم معنای شبکه های سیال قبل از شروع به فکر کردن در مورد طرح ها اهمیت دارد. توضیح بهتر از تعریف ارائه شده توسط ویکی پدیا در مایع نیست.
سیال یک ماده است که به طور مستمر تحت جریان استرس برشی اعمال می شود - Wikipedia
بنابراین، با توضیح تعریف بالا در شرایط عملی ساده، چیزها را روشن می کنم. در طراحی وب، مایع طراحی یا طرح ماست و استرس برش اندازه صفحه یا دستگاه کاربر خواهد بود. صرف نظر از اینکه دستگاه یا اندازه صفحه نمایش، اجزای طراحی سیال در جریان هستند و با محیط کاربر سازگار می شوند.
اهمیت شبکه های مایع
در شبکه های انطباق، ابعاد مبتنی بر پیکسل را تعریف می کنیم. از این رو باید عرض و ارتفاع را به صورت دستی در نمایشگرهای دستگاه خاص تنظیم کنیم. از آنجا که شبکه های سیال به طور طبیعی در ابعاد کانتینر اصلی خود جریان می یابند، تنظیمات محدودی برای اندازه ها و دستگاه های مختلف روی صفحه مورد نیاز است.
دستگاه های موبایل کوچکتر می شوند و مردم ترجیح می دهند از آنها در کار شخصی خود استفاده کنند. از سوی دیگر، مانیتورهای رومیزی با وضوح بیشتر در حال افزایش هستند. بنابراین ما نمی توانیم برای طراحی های پاسخگو طراحی کنیم.
مزیت شبکه سیگنال اینست که ما می توانیم حداکثر عرض را تنظیم کنیم و با توجه به محاسبات درصد بر روی صفحه نمایش بزرگتر کار خواهیم کرد.
چگونه شبکه های مایع کار می کنند
ما در طراحی داخلی شبکه های ثابت با سیستم 960px طراحی کردیم. سپس طرح با استفاده از اندازه های مختلف پیکسل در اندازه های مختلف صفحه نمایش سازگار شد. همه چیز در مورد طرح طرح مبتنی بر پیکسل بود. اکنون زمان برای ایجاد طرح های مبتنی بر درصد است که به عنوان طرح های مایع شناخته می شوند.
در شبکه های مایع ما یک طرح حداکثر طرح را برای طراحی تعریف می کنیم. شبکه به تعداد مشخصی از ستونها تقسیم شده است تا طرح را تمیز و راحت اداره کند. سپس هر عنصر را با عرض و ارتفاع متناسب به جای ابعاد مبتنی بر پیکسل طراحی می کنیم.
بنابراین هر زمان که اندازه دستگاه یا صفحه نمایش تغییر می شود، عناصر عرض و ارتفاع خود را با نسبت های مشخص شده به ظرفیت اصلی آنها تنظیم می کنند.
قبل از اینکه ما به شبکه های مایع عمیق بکشیم، بیایید نگاهی به برخی طرح های مایع سرد برای بدست آوردن ایده هایی در مورد چگونگی کارکرد طرح های مایع.
کارتریج آلوده
![[تصویر: div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]](http://magbot.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%da%86%db%8c%d8%af%d9%85%d8%a7%d9%86-%d8%b4%d8%a8%da%a9%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88/0.jpg%20%20%20%20%20%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=)
مقالات مرتبط![[تصویر: AMP-%DA%AF%D9%88%DA%AF%D9%84-%D8%A8%D8%B...%D8%9F.jpg]](http://magbot.ir//AMP-%DA%AF%D9%88%DA%AF%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%A8-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F/AMP-%DA%AF%D9%88%DA%AF%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%A8-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F.jpg)
[size=undefined]
![[تصویر: .jpg]](http://magbot.ir///.jpg)
[/size]
[size=undefined]
[url=http://magbot.ir//10-%D9%82%D8%B7%D8%B9%D9%87-%D9%BE%DB%8C-%D8%A7%DA%86-%D9%BE%DB%8C-%D9%82%D8%AF%D8%B1%D8%AA%D9%85%D9%86%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%DB%8C-%D8%A8%D9%87-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3]
![[تصویر: 10-%D9%82%D8%B7%D8%B9%D9%87-%D9%BE%DB%8C...%D8%B3.jpg]](http://magbot.ir//10-%D9%82%D8%B7%D8%B9%D9%87-%D9%BE%DB%8C-%D8%A7%DA%86-%D9%BE%DB%8C-%D9%82%D8%AF%D8%B1%D8%AA%D9%85%D9%86%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%DB%8C-%D8%A8%D9%87-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3/10-%D9%82%D8%B7%D8%B9%D9%87-%D9%BE%DB%8C-%D8%A7%DA%86-%D9%BE%DB%8C-%D9%82%D8%AF%D8%B1%D8%AA%D9%85%D9%86%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D8%A7%D8%B6%D8%A7%D9%81%DB%8C-%D8%A8%D9%87-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3.jpg)
[/size]