طراحی واکنشگرا

طراحی  واکنش گرا یا Responsive

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

Media چیست؟

در یک سند HTML برخی قسمت های صفحه مخصوص پرینت گرفتن می باشند و باید از style مربوط به print پیروی کنند و بعضی دیگر از قسمت ها از جمله navigation سایت نیازی به print ندارند و میتوناد از هر نوع style ای استفاده کند.
از این رو css چندین خصوصیت برای کنترل نحوه ی نمایش سند در رسانه های (media) مختلف فراهم می کند.
برای هدف قرار دادن رسانه های مختلف باید از صفت media در تگ <link> یا در تگ style استفاده کرد یا درون قواعد نوشته شده ی css میتوان از قاعده ی @media برای نشان کردن رسانه های مختلف استفاده کرد.

 
طراحی واکنشگرا طراحی واکنشگرا طراحی واکنشگرا CSS media types responsive

طراحی واکنشگرا

 
برخی از خواص CSS برای نوع خاصی از رسانه طراحی شده است که ممکن است در رسانه ای دیگر به درستی نمایش داده نشود.
برخی از خواص نیز در CSS هستند که در رسانه های مختلف عملکرد متفاوتی دارند، مثلا font-size هم برای صفحه نمایش و هم برای پرینتر مورد استفاده قرار می گیرد ولی شاید با مقادیر مختلف به این معنی که وقتی یک متن داخل صفحه نمایش قرار می گیرد باید فونت درشت تری داشته باشد نسبت به زمانی که متن قرار است در یک صفحه کاغذ قرار گیرد، فونت sans-serif برای صفحه نمایش مناسب است در حالی که فونت serif برای کاغذ مناسبتر است.
 با استفاده از دستور @media شما می توانید قواعد CSS را متناسب با نمایشگر های مختلف مانند مانیتور، لپ تاپ، تبلت و موبایل در همان فایل CSS قبلی تغییر دهید.
در مثال زیر با استفاده از دستور @media به این صورت تعریف شده است که اگر متن در صفحه نمایش قرار گرفت با فونت verdana, sans-serif و سایز ۱۷px و چنانچه با استفاده از پرینتر بر روی کاغذ چاپ شد با فونت Georgia, serif و سایز ۱۴px و به رنگ آبی نمایش داده شود.

دستور @media

دستور @media امکان تعریف قوانین گوناگون سبک دهی (style rule) برای انواع مختلف media در یک صفحه ی سبک دهی واحد (style sheet) را برای طراح وب ایجاد می کند .

کد CSS که در مثال زیر بکار گرفته شده, به مرورگر دستور می دهد نوشته را با فونت Verdana در اندازه یا با مقیاس ۱۷ پیکسل بر روی صفحه نمایش نشان دهد, ولی در صورت چاپ شدن صفحه بر روی کاغذ نوشته را با رنگ آبی و فونت Georgia به اندازه ی ۱۴ پیکسل نمایش دهد .

 

انواع media

انواع مختلف media عبارت اند از

  • all : مخصوص تمامی deviceها
  • braille : استفاده برای deviceهای مخصوص نابینایان
  • embossed : استفاده برای printer های مخصوص خط braille
  • handheld : استفاده برای device های جیبی و قابل حمل مثل tabletها
  • print : این مقدار برای ارائه ی style به printer استفاده میشود. (در مروگرها می توان از قسمت print preview برای مشاهده ی یک صفحه در این حالت استفاده کرد.)
  • projection : استفاده برای ویدئو پروژکتورها
  • screen : مخصوص نمایش در صفحه نمایش کامپیوتر
  • tv : استفاده برای تلویزیون

مقدار پیشفرض : all
فقط مقادیر screen , print و all در مرورگرها به صورت گسترده پشتیبانی می شوند.

@media all یا media=all

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

@media screen یا media=screen

این رسانه برای وسایلی که دارای صفحه نمایش بزرگ هستند (نظیر کامپیوتر، تبلت و گوشیهای هوشمند) مناسب است. توجه داشته باشید که گوشیهای قدیمی از رسانه ی دیگری استفاده میکنند.
رسانه ی screen دارای حالات مختلفی است و میتوانید بر اساس اندازه ی صفحه نمایش، استایلهای متفاوتی را درنظر بگیرید که در ادامه توضیح خواهیم داد.

@media handheld یا media=handheld

برای گوشیهایی که از سیستم wap استفاده میکنند، گزینه ی handheld مناسب است ولی با توجه به اینکه دارندگان این مدل گوشیها زیاد رغبتی به وبگردی با گوشی ندارند (به دلیل محدودیتهای زیاد وسیله) استفاده از این media زیاد ضروری به نظر نمیرسد.

@media print یا media=print

یکی از پرکاربردترین و ضروریترین media ها، حالت چاپ یا پرینت است. اغلب وبسایتها دارای بخشهای متفاوتی در صفحه هستند، برای مثال منو، تبلیغات، ستون کناری و … ولی هیچکدام از این موارد برای فردی که قصد دارد صفحه را چاپ کند مفید نیستند و به عبارتی باعث هدر رفتن جوهر چاپ و برگه های اضافی میشود. با بکارگیری استایل print میتوانیم موارد اضافی را حذف کنیم تا فقط متن مقاله و عنوان سایت در نسخه ی چاپی نمایش داده شود.
سایر رسانه ها شامل tv (برای تلویزیون و شبه تلویزیون)، projection (برای سیستمهای دانشگاهی و نمایش دهنده ی اسلایدها و ارائه ها)، Braille (برای دستگاه های نمایش دهنده خط بریل برای نابینایان)، embossed (برای چاپ صفحات به گونه ای که برای نابینایان مناسب باشد) و … هستند.

توضیحات بیشتر در خصوص media screen

همانطور که میدانید، انواع گوشیها و تبلت ها دارای صفحات نمایش در اندازه های مختلفی هستند ولی طراحی اختصاصی برای هرکدام کاری سخت و زمانبر است. برای همین منظور میتوانید تعیین کنیم که مثلا اگر اندازه ی صفحه نمایش کوچکتر از ۵۰۰ پیکسل بود کدام استایل استفاده شود و اگر اندازه صفحه نمایش بالای ۸۰۰ پیکسل بود کدام استایل. برای این امر از دستور max-width و min-width به صورت زیر استفاده میکنیم:

اگر وسیله دارای سیستم چرخش خودکار باشد، عرض صفحه دو حالت خواهد داشت، در این موارد باید هم min-width و هم max-width را در نظر بگیریم. مثلا برای iPad میتوانیم به شیوه ی زیر عمل کنیم:

سایر انواع رسانه قابل استفاده در media@ :
 
Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید