پرسش‌های رسانه‌ای برای مدتی طراحی‌های پاسخگو و متناسب با دستگاه را فعال کرده‌اند. این پرس و جوهای پیشرفته تر همه چیز را به سطح بعدی می برد.
یک تجربه قابل استفاده و قابل دسترس برای یک وب سایت موفق حیاتی است. اگر خوانندگان شما تجربه مثبتی داشته باشند، احتمال بیشتری دارد که تماسی برای اقدام، از جمله خرید محصولات، انجام دهند. آنها همچنین بیشتر احتمال دارد که سایت شما را به دیگران بازگردانند یا توصیه کنند. تجربه کلیدی است.
پرس و جوهای رسانه ای ویژگی های مختلف CSS را ارائه می دهند که می توانند وب سایت شما را سفارشی کنند. آنها به شما این امکان را می دهند که تجربه هر کاربر را بر اساس قابلیت های دستگاه آنها تنظیم کنید. بیاموزید که چگونه به خوانندگان خود بهترین تجربه را ارائه دهید، خواه آنها از تلفن خود استفاده می کنند یا یک مانیتور دسکتاپ بزرگ.
1. ویژگی اشاره گر
قانون رسانه @ دارای یک ویژگی اشاره گر است که به شما امکان می دهد طراحی خود را بر اساس دستگاه اشاره گر اولیه سفارشی کنید. شما می توانید برای در دسترس بودن و کیفیت تست کنید.
این ویژگی پرس و جو رسانه اشاره گر یکی از سه مقدار را می گیرد: هیچ، درشت، یا خوب. مقدار none زمانی اعمال می‌شود که دستگاه اشاره‌ای وجود نداشته باشد. مقدار درشت زمانی اعمال می‌شود که دستگاه اشاره‌گر اولیه سطح دقت پایین‌تری داشته باشد. و مقدار دقیق زمانی اعمال می شود که دستگاه اشاره گر اولیه از دقت بالایی برخوردار باشد.
با استفاده از ویژگی اشاره گر
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="radio"] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}
input[type="radio"]:checked {
background: red;
}
@media (pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body>
<label for="options">Options to Choose From: </label>
<input type="radio" id="options" > Option One
<input type="radio" id="options" > Option Two
</body>
</html>
کد بالا دو گزینه رادیویی ورودی ایجاد می کند که بر اساس دقت دستگاه اشاره گر اولیه کامپیوتر متفاوت است.
رایانه ای که دارای یک دستگاه اشاره گر اولیه دقیق (یا با کیفیت بالا) باشد، صفحه وب زیر را نمایش می دهد:
رایانه ای که دارای دستگاه اصلی با دقت محدود (یا کیفیت پایین) باشد، صفحه وب زیر را نمایش می دهد:
دستگاهی که دارای یک دستگاه اشاره گر اولیه با دقت محدود است، دکمه های رادیویی بزرگ تری دارد. این تجربه کاربری بهتری را برای چنین کاربرانی به ارمغان می آورد. با استفاده از ویژگی اشاره گر، می توانید اطمینان حاصل کنید که همه کاربران بدون در نظر گرفتن دستگاهشان، تجربه لذت بخشی دارند.
2. ویژگی هر اشاره گر
مانند ویژگی اشاره گر، ویژگی پرس و جو رسانه هر اشاره گر، دستگاه های اشاره گر را هدف قرار می دهد. با این حال، ویژگی هر اشاره گر هر دستگاه اشاره گر رایانه را ارزیابی می کند. ویژگی any-pointer نیز از مقادیر none، coarse و fine استفاده می کند.
با استفاده از ویژگی هر اشاره گر
@media (any-pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (any-pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
شما می توانید به سادگی کد بالا را با بخش پرسش رسانه ای کد در مثال ویژگی اشاره گر جایگزین کنید. کد بالا یک نمایشگر مناسب را بر اساس کیفیت هر وسیله اشاره‌ای که ممکن است یک کامپیوتر داشته باشد ارائه می‌کند.
3. ویژگی شناور
ویژگی پرس و جو رسانه شناور ارزیابی می کند که آیا مکانیسم ورودی اولیه یک دستگاه می تواند روی عناصر موجود در یک UI قرار بگیرد یا خیر.
با استفاده از ویژگی شناور
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!-- HTML -->
<a href="#"> A link element</a>
کد بالا یک عنصر را نمایش می دهد. هر زمان که مکانیسم ورودی اولیه دستگاه (که از شناور شدن پشتیبانی می کند) روی آن قرار گیرد، رنگ آن (از سیاه به آبی) تغییر می کند.
4. ویژگی هر شناور
پرس‌وجو رسانه هر شناور هر مکانیزم ورودی، از جمله مکانیسم ورودی اولیه را هدف قرار می‌دهد.
با استفاده از ویژگی any-show
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
پرس و جو رسانه بالا یک اثر شناور برای هر مکانیزم ورودی که قادر به شناور شدن روی یک عنصر است تولید می کند.
5. ویژگی وضوح
ویژگی پرس و جو رسانه وضوح، تعداد پیکسل های نمایش داده شده توسط یک دستگاه خاص را محاسبه می کند. دستگاهی که پیکسل های بیشتری را در هر اینچ نمایش می دهد، وضوح بهتری دارد زیرا تصاویر را با جزئیات بیشتری نمایش می دهد. این ویژگی می‌تواند به توسعه‌دهنده کمک کند تا تصمیم بگیرد که کاربران کدام دستگاه ممکن است عناصر یک رابط کاربری را واضح‌تر ببینند.
ویژگی وضوح از محدوده استفاده می کند. این بدان معناست که علاوه بر استفاده از کلمه کلیدی رزولوشن، می توانید از رزولوشن حداقل و حداکثر وضوح استفاده کنید. ویژگی وضوح درخواست رسانه متعلق به نوع داده وضوح است. این بدان معنی است که ویژگی وضوح در یکی از سه واحد قابل اندازه گیری است: نقطه در اینچ (dpi)، نقطه در سانتی متر (dpcm) یا نقطه در هر پیکسل (dppx).
با استفاده از ویژگی وضوح
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
کمترین وضوحی که یک دستگاه می تواند داشته باشد و همچنان تصاویر با کیفیت را نمایش دهد 72dpi است. بنابراین، اگر دستگاهی دارای وضوح 72dpi یا بیشتر باشد، خروجی زیر را در مرورگر خود نمایش می دهد:
6. ویژگی جهت گیری
نمای دستگاه فقط می تواند یکی از دو جهت داشته باشد: عمودی یا افقی. باید توجه داشته باشید که جهت نما با جهت گیری دستگاه متفاوت است. اگر دستگاهی از صفحه‌کلید نرم استفاده می‌کند، در حالی که خود دستگاه هنوز در موقعیت عمودی است، درگاه دید آن از حالت عمودی به افقی تغییر می‌کند.
با استفاده از ویژگی جهت گیری
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
<!-- HTML -->
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
کد بالا طرح بندی یک صفحه وب را بر اساس جهت دستگاه تغییر می دهد.
دستگاهی با نمای در حالت افقی صفحه وب زیر را نمایش می دهد:
دستگاهی با نمای در حالت عمودی صفحه وب زیر را نمایش می دهد:
7. ویژگی ارتفاع
ویژگی پرس و جو رسانه ارتفاع به شما امکان می دهد استایل CSS را بر اساس ارتفاع درگاه دید دستگاه کاربر مشخص کنید. این ویژگی از محدوده پشتیبانی می کند، بنابراین می توانید از کلمات کلیدی min-height و max-height نیز استفاده کنید.
با استفاده از ویژگی ارتفاع
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
کد بالا آنچه را که کاربر می بیند بر اساس ارتفاع دستگاه خود سفارشی می کند. کاربران با ارتفاع دستگاه 360 پیکسل و بالاتر چیزی شبیه به صفحه وب زیر می بینند:
دستگاه‌هایی با ارتفاع کمتر از 360 پیکسل، حاشیه اطراف پاراگراف را در صفحه وب نشان نمی‌دهند.
8. ویژگی عرض
ویژگی عرض رسانه پرس و جو به شما این امکان را می دهد که یک استایل خاص CSS را بر اساس عرض درگاه دید دستگاه کاربر ایجاد کنید. این ویژگی از محدوده نیز پشتیبانی می کند، بنابراین شما می توانید از کلمات کلیدی حداقل عرض و حداکثر عرض استفاده کنید.
با استفاده از ویژگی عرض
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
کد بالا آنچه را که کاربر می بیند بر اساس عرض دستگاه خود سفارشی می کند. کاربران با عرض دستگاه 600 پیکسل و بیشتر چیزی شبیه به صفحه وب زیر را مشاهده خواهند کرد:
استفاده از پرس‌وجوهای رسانه‌ای مبتنی بر عرض و ارتفاع می‌تواند یک استراتژی موثر در پاسخگو کردن وب‌سایت شما باشد.
9. ویژگی رنگ
ویژگی پرسش رسانه رنگی، جزء رنگی دستگاه (قرمز، سبز، آبی) را ارزیابی می کند. مقدار به چند بیت اشاره دارد که یک نمایشگر برای هر جزء استفاده می کند، که مشخص می کند چند رنگ مختلف می تواند نشان دهد. دستگاه های مدرن معمولا از یک صفحه نمایش 24 بیتی استفاده می کنند که از هشت بیت در هر جزء رنگی استفاده می کند. همچنین یک مقدار صحیح می گیرد، جایی که یک دستگاه بی رنگ صفر است.
ویژگی رنگ نیز از محدوده حداقل رنگ و حداکثر رنگ استفاده می کند.
با استفاده از ویژگی رنگ
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
دستگاه هایی با مولفه رنگی هفت به بالا خروجی زیر را در مرورگر خود نمایش می دهند:
اکنون می توانید تجربه های کاربری منحصر به فردی ایجاد کنید
شما باید بتوانید از این پرسش های رسانه ای پیشرفته برای بهبود تجربه هر کاربری که از وب سایت یا برنامه شما بازدید می کند استفاده کنید. مهم است که به کاربران موبایل و کاربران دسکتاپ تجربه مثبتی در سایت خود بدهید.
پرس و جوهای رسانه ای تنها ابزارهای CSS نیستند که می توانند مهارت های توسعه دهنده شما را تقویت کنند.