m3hdi

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

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

این آموزش به درخواست چند تا از دوستان قرار می دهم که خیلی دوست داشتن که بدونن 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

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

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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

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

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

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

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

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

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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