آموزش طراحی سایت رسپانسیو – بخش دوم

فرهاد کره بندی

ادامه و شروع رسپانسیو کردن سایت

جدیدا شیوه نمایش صحیح یک سایت معتبر جدیدا برای دیوایس های مختلف متفاوت شده , به شکلی که کاربر بتواند یک سایت را به بهترین شکل ممکن در گوشی موبایل , تبلت یا لپ تاپ خود ببیند . رسپانسیو یا واکنش گرا کردن قالب یک سایت یعنی اینکه طرح آن سایت با انواع دیوایس ها هماهنگ است . و تمامی این موارد با استفاده از سایز بندی صفحات انجام می شود . همانطور که میدانید هر دستگاه یک سایز مشخص دارد که با مثلا با پیکسل در سی اس اس آنها را می توانیم مشخص کنیم .

البته که نیاز به گوشزد کردن اهمیت واکنشگرا بودن یک سایت نیست اما باید بدانید ۸۰% کسانی که گوشی های هوشمند دارند هنگام صبح قبل از اینکه دندانهای خود را مسواک بزنند گوشی های خود را چک می کنند.

 

طبق آمار رسمی گوگل در سال ۲۰۱۵ حدود ۵۱ درصد از جستجوهایی که در گوگل انجام شده از طریق دستگاه های همراه مانند موبایل و تبلت بوده است.

 

چگونه سایت خود را رپسانسیو کنیم ؟

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

ابتدا در HTML خود کد زیر را قرار دهید در بین متا ها :

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

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

مرحله بعد استفاده از CSS

همانطور که می دانید مانتیور , موبایل و تبلت ها سایز های مختلفی دارند و شما می توانید هر کدام از آنها را به شکل های مختلفی در سایت قرار دهید. مثلا اگر سایز باکس اصلی سایز شما ۱۲۰۰ پیکسل باشد شما دستگاه های با کوچکتر از این روزلوشن یک نوار اسکرول در پایین سایت میبینید و این به معنای سخت تر شدن کار با سایت با دیوایس های مختلف است .

همه چیز با کد زیر در سی اس اس شروع می شود . از اینجا به شما میگوید اگر سایز صفحه کمتر از ۱۲۰۰ پیکسل بود دستورات زیر را اجرا کند .

@media screen and (max-width: 1200px) { 
دستورات CSS
}

مثلا شما اگر بخواهید یک بخش و کلاس را از بین ببرید می توانید به آن display : none بدهید یا visibility : hidden که دیگر نمایش داده نشود . به همین شکل می توانید تغییرات مختلفی دهید

فرض کنید شما در عرض ۱۲۰۰ پیکسل سایت خود دو باکس دارید با سایز ۶۰۰ پیکسل میخواهید تا سایز ۹۸۰ که مرز استفاده از تبلت ها و کامپیوتر هاست به شکل ساده در کنار هم نمایش داده شوند و در سایز کوچکتر از ۹۸۰ به زیر هم قرار بگیرند

یعنی کد اولیه ما به این شکل باشد :

div.TwoBox {
width: 600px;
height: 600px;
float: right;
}

در مرحله بعد برای اینکه در سایز کوچکتر از ۱۲۰۰ کنار هم باشند باید عرض آنها را ۵۰% قرار دهیم . در اینجا متوجه می شوید که با استفاده از % خیلی راحت تر می توانید سایت خود را طراحی کنید تا با استفاده از px یا em !

پس کد ما می شود :


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

div.TwoBox {
width: 50%;
float: right;
}
}

حال در سایز کمتر از ۹۸۰ زیر هم قرار بگیرند


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

div.TwoBox {
width: 100%;
float: none;
}
}

در واقع همانطور که مبینید رسپانسیو چیز خاصی نیست به جز هماهنگ کردن ابعاد و سایز ها با استفاده از دستورات سی اس اس. در مراحل دیگر میتوانید کار های مختلفی انجام دهید . مثلا از مهم ترین دستور ها در رسپانسیو کردن سایت استفاده صحیح از box-sizing و max-width برای عکس ها و ویدئو هاست .

مثلا شما باید این دو خط کد را به صورت پیشفرض قرار دهید در داخل طرح رسپانسیو خودتان .

 


* {
box-sizing: border-box;
padding: 0;
margin:0;
}

img {
max-width: 100%;
height: auto;
}

دستور اول به شما border-box را میدهد که برای تنظیم padding هاست که باعث می شود padding ها در width تاثیر گذار نباشند

دستور دوم هم برای تصاویر هست که می توانید این دستور رو برای تگ video و audio هم قرار دهید که باعث هماهنگی بیشتر رسانه های سایت شما می شود .

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

آموزش طراحی سایت

آموزش کامل طراحی سایت

اگر تا به حال به دنبال طراحی سایت رفتید و موفق نشدید بهتر است این مجموعه را یک نگاه کنید . مجموعه ای کامل با هدف شروع از ساده ترین نکات برای افراد مبتدی تا ساختن یک قالب حرفه ای در وردپرس !


براتون منتشر کنم