بخش “طرح بندی” جدید تنظیمات الگوی مرتبط با طراحی صفحه را مدیریت می کند. این رویکرد جدید ما برای طراحی قالب است که به موجب آن صفحات می توانند به منظور مطابقت با اندازه صفحه نمایش دستگاه های مختلف از مقیاس بالا یا پایین برخوردار باشند: از صفحه نمایش های کامل رومیزی گرفته تا تبلت گرفته تا صفحه های لمسی کوچک که در تلفن های هوشمند یافت می شود.
تغییرات زیر برای اجرای پشتیبانی پاسخگوی طراحی وب برای ما ضروری بود:
طرح جدید برای موقعیت های ماژول
پسوندهای جدید برای موقعیت های ماژول اصلاح شده
پسوندهای جدید ویژه برای نمایش در دستگاه های تلفن همراه
بخش موبایل از تنظیمات الگو حذف شد
طرح جدید برای موقعیت های ماژول
هر الگوی طرح پاسخگو با سه تغییر طرح حمل می شود. این تغییرات طرح عبارتند از:
دسک تاپ – یک طرح طراحی شده برای پشتیبانی از صفحات گسترده استاندارد ، شامل منوی معمولی و قالب چند ستون.
رایانه لوحی – یک طرح برای نمایش در دستگاه های اندازه تبلت ، با استفاده از عناصر خاص به موقعیت های جدید و با استفاده از یک قالب دو ستونی. و ،
تلفن همراه – یک طرح پشتیبانی از کوچکترین صفحه نمایش در حال حاضر ، شامل یک سایت بازدید کننده تنها با یک طرح تک ستونی.
بیایید این طرح بندی ها را با جزئیات بیشتری مقایسه کنیم.
تصویر زیر نشان می دهد که بخش اصلی قالب از سه ستون تشکیل شده است ، یعنی:
داخل
بدنه اصلی
نوار کناری
Gray Layout Grid
ستون تا حدودی با نوار کناری ترکیب شده است زیرا ماژول های موجود در نوار کناری روی صفحه نمایش های کوچکتر باید در زیر قسمت اصلی قرار گیرند. بنابراین ، در این مثال ، بلوک اصلی به عنوان یک بلوک متحرک واحد از ماژول های نوار کناری رفتار می شود. ماژول نوار کناری برای پر کردن فضای موجود از MooMasonry استفاده می کند. کمی در این مقاله در مورد این مکانیسم بحث خواهیم کرد.
چهار عنصر اساسی در تغییر تبلت از طرح استاندارد تغییر یافته است:
منو در زیر آرم قرار دارد
ستون inset به عنوان یک دکمه به گوشه بالا سمت راست منتقل شده است
ماژول ها از موقعیت ماژول نوار کناری ، دو ستون را در زیر بلوک اصلی ایجاد می کنند
این پاورقی در پایین صفحه نمایش داده شده است و نه در ستون ورودی
طرح دستگاه های تلفن همراه همانگونه است:
اکنون منو نوار بالای صفحه را ایجاد می کند
دکمه ستون inset به نوار منو می رود
ماژول ها از ماژول نوار کناری تشکیل می دهند و اکنون یک ستون را در زیر بلوک اصلی ایجاد می کنند
پاورقی کوچکتر است و با عرض دستگاه همراه متناسب است
کلا چگونه کار می کند؟
ما چند سؤال از رسانه را در هر الگویی تعبیه کرده ایم:
در پایان فایل css / menu / menu.css ، کدی را که ما به آنها “query media” می گویم قرار داده ایم که براساس نوع نمایشگر شناسایی شده برای دستگاه فعلی ، طراحی منوی مناسب را انتخاب و نمایش می دهد.
قوانین نمایشگرهای کوچکتر در پرونده css / tablet.css قرار دارند
قوانین CSS که مسئول طراحی صفحه در کوچکترین صفحه هستند در پرونده css / mobile.css قرار دارند
پرس و جوهای رسانه ای برای پرونده tablet.css بسته به تنظیمات بخش طرح بندی بطور خودکار محاسبه می شوند.
به طور کلی ، طرح تبلت زمانی فعال می شود که اندازه صفحه نمایش از اندازه عرض ستون و صفحه ستون اصلی کوچکتر باشد.
طرح بندی قرص
محتوای پرونده mobile.css برای تلفن های هوشمند با اندازه صفحه کوچکتر از 640 پیکسل (البته با نسبت پیکسل 2.0) فعال شده است.
برای وضوح بالاتر ، طرح پیش فرض معمولاً با استفاده از شبکه قالب متناسب با خودکار خواهد بود.
پیش نمایش کامل شبکه
چگونه قالب بندی چیدمان الگو تنظیم شده است؟
بیایید نگاهی دقیق تر به بخش جدید چیدمان در بخش انتهایی این الگو بیندازیم:
چند گزینه مهم در اینجا یافت می شود.
بالشتک بدنه چپ / راست – از این گزینه برای تنظیم بالشتک سمت چپ / راست در طرح صفحه استفاده می شود. لازم است که این کار را روی مقدار مناسب تنظیم کنید تا از بروز مشکلاتی در مورد قرار دادن بلوک در لبه صفحه جلوگیری کنید.
عرض پایه شبکه – مهمترین تنظیم ، برای مشخص کردن عرض ستون شبکه طرح استفاده می شود. این توضیح می دهد که هر ستون تا چه اندازه گسترده خواهد بود و با چند گزینه بعدی کاملاً مرتبط است.
فضاهای شبکه – همچنین یک گزینه بسیار مهم ، این فاصله ها بین بلوک های طرح را مشخص می کند:
عرض اصلی – این گزینه به “عرض پایه شبکه” مربوط می شود. در اینجا می توانید عرض ستون اصلی را با استفاده از عرض ستون های پایه مشخص کنید (به عنوان مثال ، اگر عرض ستون روی 200 پیکسل تنظیم شده و عرض اصلی 2 برابر باشد ، عرض اصلی اصلی 200 * 2 = 400 پیکسل است. فضای واقعی در ستون اصلی کوچکتر خواهد بود زیرا همه بلوک ها از مجموعه جعبه اندازه CSS با مقادیر کادر جعبه استفاده می کنند ، بنابراین فضای نهایی کوچکترین مقدار فضای فضای شبکه ضرب در 2 خواهد بود.
عرض محتوا – این گزینه مانند سایر گزینه های مورد استفاده برای پرت کردن مقادیر خاص روی گزینه های خاص یا آیتم های IDID کار می کند. در اینجا ، ممکن است پهنای اصلی برای صفحات خاص نادیده گرفته شود. به عنوان مثال ، اگر برای مولفه K2 به ستون اصلی گسترده تر نیاز دارید.