داستان های رسانه

طراحان می توانند طرح های خود را به گونه ای تنظیم کنند که کاربران را در خود جای دهد. واضح ترین مثال از این موضوع، فرم فاکتور دستگاه کاربر است. عرض آن، نسبت ابعاد دستگاه و غیره. با استفاده از پرسش های رسانه ای، طراحان می توانند به این عوامل شکلی مختلف پاسخ دهند.

پرس و جوهای رسانه ای با کلمه کلیدی @media (یک قانون CSS) آغاز می شوند و می توانند برای موارد مختلف استفاده شوند.

انواع مختلف خروجی را هدف قرار دهید

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

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

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

می توانید از @media at-rule در شیوه نامه خود استفاده کنید یا می توانید یک شیوه نامه جداگانه ایجاد کنید و از ویژگی media در عنصر link استفاده کنید:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

اگر هیچ نوع رسانه ای را برای CSS خود مشخص نکنید، به طور خودکار مقدار all نوع رسانه را خواهد داشت. این دو بلوک CSS معادل هستند:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

این دو خط HTML نیز معادل هستند:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

شرایط پرس و جو

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

این دستور برای درخواست های رسانه ای است:

@media type and (feature)

اگر استایل های شما در یک شیوه نامه جداگانه باشد، می توانید از پرس و جوهای رسانه ای در عنصر link استفاده کنید:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

فرض کنید می خواهید سبک های مختلفی را اعمال کنید بسته به اینکه پنجره مرورگر در حالت افقی است (عرض دید از ارتفاع آن بیشتر است) یا حالت عمودی (ارتفاع درگاه دید بیشتر از عرض آن است). یک ویژگی رسانه ای به نام orientation وجود دارد که می توانید برای آزمایش آن استفاده کنید:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

یا اگر ترجیح می دهید شیوه نامه های جداگانه داشته باشید:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

در این مورد نوع رسانه all است. چون این مقدار پیش‌فرض است، در صورت تمایل می‌توانید آن را کنار بگذارید:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

یا استفاده از شیوه نامه های جداگانه:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

اگرچه استفاده از شیوه نامه جداگانه برای انواع رسانه های مختلف - مانند print - ممکن است مشکلی نداشته باشد، احتمالاً استفاده از یک شیوه نامه جداگانه برای هر درخواست رسانه ایده خوبی نیست. به جای آن از @media at-rules استفاده کنید.

سبک ها را بر اساس اندازه درگاه دید تنظیم کنید

برای طراحی واکنش گرا، یکی از مفیدترین ویژگی های رسانه شامل ابعاد درگاه دید مرورگر است. برای اعمال سبک‌ها زمانی که پنجره مرورگر عریض‌تر از عرض معینی است، از min-width استفاده کنید.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

از ویژگی رسانه max-width برای اعمال سبک های زیر یک عرض معین استفاده کنید:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

می توانید از هر واحد طول CSS در جستارهای رسانه ای خود استفاده کنید. اگر محتوای شما بیشتر مبتنی بر تصویر است، پیکسل‌ها می‌توانند بیشترین معنا را داشته باشند. اگر محتوای شما عمدتاً مبتنی بر متن است، احتمالاً منطقی‌تر است که از یک واحد نسبی که بر اساس اندازه متن است، مانند em یا ch استفاده کنید:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

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

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

نقاط شکست را بر اساس محتوا انتخاب کنید

نقطه ای که در آن شرط ویژگی رسانه درست می شود، نقطه شکست نامیده می شود. بهتر است نقاط شکست خود را بر اساس محتوای خود انتخاب کنید تا اندازه دستگاه های محبوب، زیرا با هر چرخه انتشار فناوری ممکن است تغییر کند.

در این مثال، 50em نقطه ای است که در آن خطوط متن به طرز ناراحت کننده ای طولانی می شوند. بنابراین یک نقطه شکست ایجاد می شود تا رابط خواناتر شود. با استفاده از ویژگی column-count ، متن از آن نقطه به بعد به دو ستون تقسیم می شود.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

ترکیبات

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

می‌توانید پرس‌وجوهای رسانه‌ای را طوری ترکیب کنید که استایل‌ها فقط زمانی اعمال شوند که همه شرایط درست باشند. در این مثال، ویوپورت باید حداقل 50em عرض و 60em ارتفاع داشته باشد تا سبک های ستون اعمال شوند. آن نقاط شکست بر اساس میزان محتوا انتخاب شدند.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

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

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

دانش خود را در مورد پرس و جوهای رسانه ای پاسخگو آزمایش کنید.