آموزش اصول طراحی قالب Responsive

m3hdi · اسفند 92

این آموزش به درخواست چند تا از دوستان قرار می دهم که خیلی دوست داشتن که بدونن Responsive کردن سایت به چه صورتی هستش . لازم هستش که بگم این آموزش بسیار کوتاه هستش و تقریبا در 5 مرحله ساخته شده و بیس کار به صورت زیر هستش ، شما بسته به نیاز خودتون می توانید تغییرات را انجام بدهید :

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

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

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

یک مشکلی وجود داره و اون اینکه در نسخه اینترنت اکسپلورر سرطان 8 به پایین media queries را که اصلی ترین بخش قالب ریسپانسیو هستش نمی شناسه . برای همین باید این کد جاوا اسکریپت فراخوانی کنیم :

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

-----------------------------------------------------------------

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

[ATTACH=CONFIG]5853[/ATTACH]

ما یک کلاس اصلی داریم به نام 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% کل محوطه قالب سایتمون ... تا اینجا درست ؟؟؟؟

<style>
.container {width:960px;}
</style>

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

<style>
.container {width:960px;}
.header {width:100%}
</style>

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

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

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

650/960=0.6770833333333333 * 100 = 67.70833333333333%

دقیقا این می شود اندازه به درصدی که میخواهیم .

برای قسمت های دیگر هم به صورت بالا حساب کنید تا خودتون یاد بگیرید ... حتی به 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 خود دستورات زیر را وارد می کنید ::

@media screen and (max-width: 960px) {
 .class {
   background: #ccc;
 }
}

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

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

@media screen and (min-width: 600px) and (max-width: 900px) {
 .class {
   background: #333;
 }
}

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

[ATTACH=CONFIG]5854[/ATTACH]

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

responsive search mobial - Google Search

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

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

محمد · اسفند 92

مرسی ، دستتون درد نکنه

vahida368 · خرداد 93

تشکر :25:

میشه بگید دقیقا آدرس محلی که باید کد را قرار بدیم کجاست؟

ورود

آموزش اصول طراحی قالب Responsive

3 پست در این موضوع

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

خانه

فعالیت ها