آموزش گام گام ریسپانسیو کردن سایت با Css | طراحی سایت در ارومیه

آموزش گام گام ریسپانسیو کردن سایت با Css

آموزش گام گام ریسپانسیو کردن سایت با CssReviewed by مهدی موسی زاده on Mar 3Rating: 5.0آموزش گام گام ریسپانسیو کردن سایت با Css | طراحی سایت در ارومیهآموزش (ریسپانسیو کردن سایت با css) از سایت ارومیه ، به صورت گام به گام نحوه ریسپانسیو کردن سایت با css را توضیح دادیم . ریسپانسیو با سئو نیز رابطه دارد.

ریسپانسیو کردن سایت با css

در این آموزش (ریسپانسیو کردن سایت با css) از طراحان سایت ارومیه ، به صورت گام به گام نحوه ریسپانسیو کردن سایت با css را توضیح دادیم ، همون طور که میدونید امروزه استفاده از تبلت ها و گوشی ها برای مرور صفحات وب رایج شده و ریسپانسیو بودن سایت یک مورد مهم هست که بایستی رعایت شود.

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

پیشنیازها

تو این آموزش قراره از دستور media در css استفاده کنیم که در آموزش زیر به صورت کامل این دستور و روش های استفاده از اون به صورت کامل شرح داده شده که پیشنهاد میکنم اگه اصلا با این دستور اشنایی ندارید این مطلب رو بخونید (دوستانی هم که نمیدونن ریسپانسیو چیه هم میتونن این آموزش رو بخونن ) :

بیشتر بخوانید »»» مدیاکوئری در css چیست و روش های استفاده و تعریف ریسپانسیو

گام اول ( ایجاد فایل ها ) :

ابتدا فایل های زیر رو بسازید و همه رو در یک پوشه قرار بدید ( البته میتونید از نام های دلخواه استفاده کنید ، برای ادامه و درک مطلب فعلا همین فایل ها رو بسازید ) :

  1. index.html
  2. desktop.css
  3. tablet.css
  4. mobile.css

گام دوم ( نحوه آدرس دهی فایل های css به صفحه اصلی ) :

برای اینکه فایل های css رو به صفحه اصلی (index.html) اضافه کنیم کد های زیر رو در بین تگ head قرار بدید :

<link   rel="stylesheet" type="text/css" href="desktop.css">
<link media="screen and (min-width: 0px) and (max-width: 327px)" rel="stylesheet" type="text/css" href="mobile.css">
<link media="screen and (min-width: 328px) and (max-width: 768px)" rel="stylesheet" type="text/css" href="tablet.css">

در دستورات بالا اگر اندازه دیوایس 0 تا 327 پیکسل باشد ، استایل های فایل mobile.css اعمال خواهند شد و بقیه در این سایز اعمال نخواهند شد.

اگر اندازه صفحه نمایش ما 328 تا 768 پیکسل باشد استایل های فایل tablet.css اعمال خواهند شد و در عرض های بیشتر از 768 فایل desktop ما اعمال خواهد شد.

گام سوم ( نحوه سایز دهی به المان ها در css ) :

برای اینکه المان های ما ریسپانسیو باشند نباید از یک طول معین استفاده کنیم . مثلا اگر یک div با طول 500px تعریف کنیم این اتفاقات می افتد .

در این صورت در صفحه نمایش های با اندازه 1000px این دایو نصف صفحه خواهد بود و در اندازه های 500px این دایو کل صفحه را خواهد گرفت و در اندازه های کمتر از 500 صفحه ما اسکرول افقی خواهد خورد.

به عبارتی اندازه این دایو به صورت همیشه ثابت خواهد بود و نسبت به سایز های مختلف هیچ واکنشی نشان نخواهد داد

ولی اگر به جای پیکسل از درصد استفاده کنیم این مشکل رفع خواهد شد ، مثلا بگویم 50% باشد طول دایو ما ، در این صورت در همه ی سایز ها اندازه دایو ما نصف صفحه خواهد بود یا اگر 33% بگویم همیشه یک سوم اندازه صفحه دیوایس خواهد بود.

گام چهارم ( مثال ساده جهت درک بهتر ) :

محتوای چهار فایلی که در بالا گفتیم بسازید و در یک پوشه قرار دهید را با کد های زیر پر کنید  ( کپی کنید ).

محتوای فایل index.html :

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="desktop.css">
<link media="screen and (min-width: 0px) and (max-width: 327px)" rel="stylesheet" type="text/css" href="mobile.css">
<link media="screen and (min-width: 328px) and (max-width: 768px)" rel="stylesheet" type="text/css" href="tablet.css">
<title>Responsive</title>
</head>

<body>
 <div id="header">
</div>
</body>
</html>

محتوای فایل desktop.css :

#header
{
	width:33%;
	height:50px;
	background:#F00;
}

محتوای فایل tablet.css :

#header
{
	width:33%;
	height:50px;
	background:#0F6;
}

محتوای فایل mobile.css :

#header
{
	width:100%;
	height:50px;
	background:#03C;
}


همچنین برای مشاهده سرفصل دوره های آموزشی تخصصی طراحان وب ارومیه (فتوشاپ برای کار ، طراحی وب سایت برای ورود به بازار کار و بهینه سازی وب سایت برای موتورهای جستجو یا سئو) میتونید به این صفحه مراجعه کنید.

شماره تماس ها جهت مشاوره ریگان و پشتیبانی :

☎ تلفن تماس : 04135595289

☎ تلفن پشتیبانی : 09146674080


منبع : طراحان سایت ارومیه | urmiasite

دیگر مقالات مفید سایت:

نوشتن نظر

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