responsive-web-desighn-1
تاریخ انتشار :     3 دی 1398

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

طراحی سایت ریسپانسیو باعث می شود وب سایت شما در همه دستگاه ها بدون داشتن هیچگونه بهم ریختگی نمایش داده شود.در این نوع طراحی از کدهای HTML و CSSاستفاده می کند.

طراحی ریسپانسیو , طراحی بهترین تجربه برای همه کاربران:

هنگامی که از CSS و HTML برای تغییر اندازه ، مخفی کردن ، کوچک کردن ، بزرگنمایی یا جابجایی محتوا به منظور ایجاد زیبایی در هر صفحه ،استفاده می کنید آن راطراحی وب ریسپانسیو می گویند.

بیایید شروع به ایجاد یک شبکه نمایشگر ریسپانسیو کنیم:

بسیاری از صفحات وب مبتنی بر یک شبکه هستند ، به این معنی که صفحه به ستون ها تقسیم می شود. استفاده از grid view هنگام طراحی صفحات وب بسیار مفید است و قرار دادن عناصر در صفحه را آسانتر می کند.

یک شبکه نمایشگر  ریسپانسیو معمولاً دارای 12 ستون است ، و 100٪ عرض دارد و با تغییر اندازه پنجره مرورگر ، کوچک میشود و گسترش مییابد.

ابتدا اطمینان حاصل کنید که box-sizing همه عناصر HTML دارای ویژگی border-box باشند. این امر باعث می شود که pading و margin در عرض و ارتفاع کل عناصر درج شوند.

کد زیر را در CSS خود اضافه کنید:

 

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

با این حال ، ما می خواهیم از یک شبکه نمایشگر ریسپانسیو با 12 ستون استفاده کنیم تا کنترل بیشتری در صفحه وب داشته باشیم.

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

8.33٪=12 ستون / %100

سپس برای هر یک از 12 ستون ، یک کلاس ایجاد می کنیم ، ”- class=”colو یک عدد را مشخص می کنیم که چند ستون باید از طول ستون باشد:

 

تمام این ستون ها باید دارای float:left و دارای یک padding:15 px باشند:

 

هر سطر باید در یک  <div> قرارداده شود. تعداد ستون های داخل یک ردیف همیشه باید تا 12 اضافه شود:

 

ستون های داخل یک ردیف همه در سمت چپ شناور هستند و از این رو از جریان صفحه خارج می شوند و سایر عناصر طوری قرار می گیرند که گویی ستون ها وجود ندارند. برای جلوگیری از این امر ، یک ویژگی  را اضافه خواهیم کرد که جریان را پاک می کند:

 

ما همچنین می خواهیم برخی از سبک ها و رنگ ها را برای بهتر جلوه دادن آن اضافه کنیم:

media query چیست؟

media query یک تکنیک CSS است که در CSS3 معرفی شده است.این قانون از قانونmedia استفاده می کند تا یک بلوک از خصوصیات CSS را درشرایط خاص نیز اجرا کند.

مثال:

اگر پنجره مرورگر 600 پیکسل یا کوچکتر باشد ، رنگ پس زمینه روشن خواهد شد:

 

در اوایل این آموزش ما یک صفحه وب با ردیف ها و ستون ها درست کردیم که پاسخگو بود ، اما در یک صفحه کوچک خوب به نظر نمی رسید. media می تواند در این زمینه کمک کند.

مثال:

هنگامی که صفحه نمایش (پنجره مرورگر) از 768px کوچکتر می شود ، هر ستون باید 100٪ عرض داشته باشد:

همیشه در ابتدا برای موبایل طراحی کنید:

Mobile First به معنای طراحی تلفن همراه ،قبل از طراحی رومیزی یا هر وسیله دیگر (این باعث می شود صفحه سریعتر در دستگاه های کوچکتر نمایش داده شود). این بدان معنی است که ما باید در CSS خود تغییراتی ایجاد کنیم.

به جای تغییر استایل ها وقتی عرض از 768px کوچکتر شود ، باید از زمانی که عرض از  768px بزرگتر شود ، طرح را تغییر دهیم. این باعث می شود طرح اول ما موبایل باشد:

 

شما می توانید به همان اندازه نقاط دلخواه خود را اضافه کنید.

ما همچنین می خواهیم یک نقطه شکاف بین دسکتاپ و تبلت ها و تلفن های همراه قرار دهیم که این کار را با اضافه کردن یک media query دیگر (با سرعت 600 پیکسل) و مجموعه ای از کلاس های جدید برای دستگاه های بزرگتر از 600px (اما کوچکتر از 768px) انجام می دهیم:

توجه داشته باشید که دو مجموعه کلاس تقریباً یکسان هستند ، تنها تفاوت آن در نام ( -col و col-s) است:

 

ممکن است عجیب به نظر برسد که ما دو مجموعه کلاس یکسان داریم ، اما این امکان را به ما می دهد تا در HTML ، تصمیم بگیریم که با ستون ها در هر نقطه شکست (breakpoint) چه اتفاقی می افتد:

برای دسکتاپ:

بخش اول و سوم هر دو 3 ستون هر کدام را شامل می شوند. بخش میانی 6 ستون خواهد بود.

برای (تبلت ها):

بخش اول شامل 3 ستون ، بخش دوم 9 و بخش سوم در زیر دو بخش اول نمایش داده می شود و 12 ستون را شامل می شود:

نقاط ضعف دستگاه های معمولی:

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

 

بسته به جهت گیری مرورگر می توانید از نمایش media query نیز استفاده کنید.

به عنوان مثال:

اگر جهت در حالت افقی باشد ، صفحه وب دارای پس زمینه نور خواهد بود:

 

گاهی اوقات میخواهیم بعضی مواقع و در حالتی خاص بعضی از عناصر را پنهان کنیم . به عنوان مثال:

مثالی دیگر:

اندازه قلم را با نمایش داده های رسانه تغییر دهید:

همچنین می توانید از media برای تغییر اندازه قلم یک عنصر در اندازه های مختلف صفحه استفاده کنید:

 

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

آینده از آن کسب و کارهای آنلاین است…

  • امتیاز :
    1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 امتیازها, میانگین: 5٫00 از 5)
    Loading...
  • نظرات