ریسپانسیو کردن قالب

در طرح ریسپانسیو برای هر محدوده پیکسلی یک سری قوانین با CSS روی صفحه اجرا می شود که هدف از آن بهتر نمایش دادن سایت در آن عرض می باشد. به صورتی که صفحه بهم نمی ریزد. در صفحه های موبایل و همچنین تبلت ها طرح نیاز به زوم کردن ندارد.

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

چگونه باید صفحه را ریسپانسیو یا واکنش گرا کنیم؟
ابتدا طرح را به صورت معمول مثل همیشه کدنویسی کنید و البته واکنش گرا بودن آن را مد نظر داشته باشید. مثلا مد نظر داشته باشید که نوبار شما قرار است در صفحات خیلی کوچک مثل صفحات موبایل به یک آیکن تغییر کند که با کلیک بر روی آن منو نوبار ظاهر می شود.
سپس کد زیر را باید در head قالب خود قرار دهید که به دستگاه می فهماند قالب باید هم عرض دستگاه لود شود.
برای اینکه تغییرات و اندازه دیوایس ها را بدانید می توانید اپ Dimensions را برای گوگل کروم را از آخر پست دانلود کنید. در این اپ اندازه عمومی دیوایس ها وجود دارد و می توانید سایت خود را در آن وارد کرده و در عرض های مختلف ببینید.

قرار دادن کد متاتگ در بخش Head سایت :


این متاتگ باعث می شود که به مرورگرهای تلفن همراه بفهمانید که این سایت برای نمایش در صفحات شما هم ساخته شده است.

بخش مربوط به فرم دهی قالب سایت :
ما یک کلاس اصلی داریم به نام container به عرض 960 پیکسل ، که داخل این کلاس ، کلاس های مربوط به header , Content , Footer Sidebar قرار می گیرند .

عرض یا همان width به صورت زیر می باشد :
container : 960px
header : 960px
Content :650 px
sidebar : 245px
footer : 960px

چون اصول ریسپانسیو کردن بدین صورت می باشد که باید با درصد کار کنیم پس باید بدانیم چطور باید بفهمیم عرض قسمت هایی header , Content , Footer , Sidebar به درصد چقدر می باشد؟

نمی توان همین طور گفت که مثلا به Content بشود 70% ، مخصوصا اگر قالبی داریم که از روی یک فایل گرافیکی طراحی می کنیم.
برای اینکه بدانیم اندازه دقیق مثلا Content ما به درصد چقدر می باشد یک فرمول می باشد.

نحوه محاسبه فرمول :
container : 960Px و به درصد یعنی اینکه 100% کل محوطه قالب سایتمان.

کد HTML:



کلاس Header ما هم چون دقیقا هم اندازه عرض container می باشد به صورت زیر یاداشت می کنیم.
کد HTML:


اکنون کلاس Content را بررسی می کنیم.همانطور که گفتیم عرض container برابر است با 960 پیکسل ، و عرض Content ما نیز برابر با 650 پیکسل برای به دست آوردن درصد Content از فرمول زیر استفاده می کنم.

کلاس مورد استفاده / کلاس اصلی * 100

Content/container = ??? * 100 = add morde nazar

650/960=0.6770833333333333 * 100 = 67.70833333333333%

برای قسمت های دیگر هم به صورت بالا حساب کنید تا خودتان یاد بگیرید. حتی به Margin-Left و یا margin-right هم همین طور باید محاسبه شود و عدد به درصد قرار داده شود.

بخش CSS3 media query
در این قسمت باید تعیین کنیم وقتی که صفحه نمایش ما به این مقدار رزلوشنی رسید به چه صورت سایت نمایش بدهد. برای اینکه ببینید سایتتان ببین در سایز های استاندارد و غیر استاندارد به چه صورت می باشد به روش زیر عمل کنید.

الف ) استفاده از سایت های آنلاین که سایت شما را در دیوایس های مختلف با رزولوشن های مختلف نمایش می دهدند
Responsive Design Testing
Mobile Responsive Design Testing
Testing responsive web design in various resolutions | ResponsiveTest

ب ) استفاده از امکانات خود مرورگر
برای راه دوم در مرورگر Firefox از منوی Tools گزینه Web Developer و سپس گزینه Responsive Design View انتخاب کنید.
در قسمت بالا سمت چپ چند یک DropDown وجود دارد که داخلش یک سری عدد نوشته شده است. این اعداد اندازه های استاندارد Device ها هستند . خودتان هم می توانید با Drog and Drop صفحه بزرگ یا کوچیک کنید.
بعد از اینکه رزلوشنی که وقتی قالب به اون رزلوشن میرسه ظاهرش خراب می شود پیدا کردید در انتهای کدهای CSS خود دستورات زیر را وارد می کنید.

کد HTML :

@media screen and (max-width: 960px) {

.class {

background: #ccc;

{

}

این یعنی اینکه حداکثر عرض رزولوشن نمایشی 960 پیکسل بود بیاد به کلاس بکگراند بده.
یا اینکه به صورت زیر هم می توانیم بنویسم.

کد HTML:

@media screen and (min-width: 600px) and (max-width: 900px) {

.class {

background: #333;

}

{

این یعنی اینکه حداقل سایز نمایش 600 پیکسل و حداکثر 900 پیکسل بود اینکارها را انجام بده.