این آموزش به درخواست چند تا از دوستان قرار می دهم که خیلی دوست داشتن که

بدونن Responsive کردن سایت به چه صورتی هستش . لازم هستش که بگم این

آموزش بسیار کوتاه هستش و تقریبا در 5 مرحله ساخته شده و بیس کار به صورت

زیر هستش ، شما بسته به نیاز خودتون می توانید تغییرات را انجام بدهید :

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

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

یک مشکلی وجود داره و اون اینکه در نسخه اینترنت اکسپلورر سرطان 8 به پایین

media queries را که اصلی ترین بخش قالب ریسپانسیو هستش نمی شناسه . برای

همین باید این کد جاوا اسکریپت فراخوانی کنیم :

2- بخش مربوط به فرم دهی قالب سایتمون شدش .... فرم شکل زیر را ببینی ::

http://joomlaforum.ir/attachment.php?attachmentid=5853&d=1393842104

ما یک کلاس اصلی داریم به نام container که به عرض 960 پیکسل ، که داخل این

کلاس ، کلاس های مربوط به header , Content , Footer , Sidebar قرار می

گیرند ...

عرض یا همون width به صورت زیر است :

container : 960px

header : 960px

Content :650 px

sidebar : 245px

footer : 960px

چون اصول ریپسانسور کردن بدین صورت هستش که باید با درصد کار کنیم

پس باید بدانیم چطور باید بفهمیم عرض قسمت هایی header , Content , Footer ,

Sidebar به درصد چقدر است ؟ الکی نمی تونیم بیایم مثلا به Content بگم تو

بشو 70% یا سایدبار تو هم بشو 30% ، مخصوصا اگر این قالب داریم از روی یک

فایل گرافیکی طراحی می کنیم !!!!

3-

برای اینکه بدانیم اندازه دقیق مثلا Content ما به درصد چقدر هستش یک

فرمولی هستش که از یک فیلم آموزش در یوتیوب به دست آوردم که بسیار جالب بود

برام ...::

نحوه محاسبه فرمول :

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

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

حالا می رسیم به کلاس Content . یه کم به این قسمت بیشتر توجه کنید،

همانطور که گفتیم عرض container برابر است با 960 پیکسل ، و عرض Content

ما نیز برابر با 650 پیکسل برای به دست آوردن درصد Content از فرمول زیر

استفاده میکنم ::

برای قسمت های دیگر هم به صورت بالا حساب کنید تا خودتون یاد بگیرید ...

حتی به Margin-Left و یا margin-right هم همینطوری باید محاسبه کنید و عدد

به درصد قرار بدهید ...

4 - می رسیم به بخش 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 خود دستورات زیر را وارد می کنید ::

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

یا اینکه به صورت زیر هم می توانیم بنویسم ::

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

http://joomlaforum.ir/attachment.php?attachmentid=5854&d=1393844618

اگر می خواهید media queries بیشتر بدونید کافی تو گوگل این عنوان جستجو کنید

responsive search mobial - Google Search

امیدوارم از این آموزش خوشتون اومده باشه

موفق باشید ....

اینم هدیه معاون شدنم