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

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

یوسف پور امینیان 1396-02-31 11 دقیقه مطالعه

بدون دیدگاه

امروزه با توجه به زشد چشمگیر تکنولوژی ارتباطات به جرعت میتوان گفت در حدود نیمی از کاربران با دستگاه های موبایل و تبلت وارد اینترنت میشوند . به علاوه طراحی نسخه رسپانسیو برای سایت باعث رشد چشمگیر رتبه الکسا و در نتیجه سئو میشود . چراکه گوگل این مورد را بسیار پر اهمیت میداند . طوری که حتی در زمان جستجو کاربر در صورتتی که سایت شما رسپانسیو نشده باشد متن ” This Page Is Not User Friendly ” را نمایش میدهد که این خود باعث میشود کاربر وارد سایت شما نشود .

در این مقاله میخواهیم به شما طراحی نسخه رسپانسیو یا همان طراحی نسخه موبایل و تبلت رو به شما آموزش بدهیم . گام اول برای طراحی نسخه رسپانسیو میبایست شما طراحی خود را برای نسخه PC یا لب تاب کامل نمایید .

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

ابتدا متا تگ زیر را در بخش هیدر بین تو تگ Head قرار دهید .

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>

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

حال سه فایل css زیر را در هاست خود ایجاد کرده در همین قسمت Head فراخوانی نمایید .

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

خط اول css سایت شما را زمانیکه عرض صفحه بیشتر از ۱۰۲۴ باشد میخواند .

خط دوم css سایت شما وقتی عرض صفحه دستگاه بین ۰ تا ۳۲۷ باشد میخاند .

و خط سوم css سایت را وقتی که عرض صفحه دستگاه بین ۳۲۸ تا ۱۰۲۳ باشد میخاند .

توجه داشته باشید که محدودیتی در سه فایل نیست شما میتوانید برای مثال از چندین Css استفاده نمایید . برای مثال امکان دارد css طراحی شده شما برای دستگاه هایی تا ۴ اینچ سازگاری باشد . شما میتوانید چند فایل Css دیگر برای ابعاد مثلا ۰ تا ۲۰۰ و ۲۰۱ تا ۳۰۰ و ۳۰۱ تا ۴۰۰ و … بسازید .

در برخی موارد پیش میاید که شما چیزی رو در نسخه Pc نمایش میدهید اما مثلا در ابعاد ۰ تا ۳۲۸ میخواهید نمایش داده نشود . پاسخ بسیار راحت است .
ابتدا آن را در یک Div قرار میدهد . سپس در جایی که میخاهید نماش داده نشود استایل زیر را در css مورد نظر وارد کنید .
```
hidden {
display: none;
}
```

* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایز ها تحت هیچ شرایطی مورد استفاده قرار نمی گیرد.

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