پرس وجوهای رسانه ای (RWD Media Queries)
«پرس وجوهای رسانه ای (Media Queries)» یعنی استایل بر اساس دستگاه عوض شود. مثلا روی موبایل ستون ها زیر هم باشند. «Breakpoint» نقطه تغییر چیدمان است. با قانون @media این کار انجام می شود.
پرس وجوهای رسانه ای چیست؟
پرس وجوهای رسانه ای ویژگی های دستگاه را می سنجند. سپس استایل مناسب اعمال می شود. بنابراین تجربه کاربر بهتر می شود.
افزودن یک breakpoint در 600px
در این مثال، چیدمان با عرض حداقل 600px تغییر می کند.
<style>
@media (min-width: 600px) {
.header {
grid-area: 1 / span 6;
}
.menu {
grid-area: 2 / span 1;
}
.content {
grid-area: 2 / span 4;
}
.facts {
grid-area: 2 / span 1;
}
.footer {
grid-area: 3 / span 6;
}
}
</style>
دو breakpoint برای تبلت و دسکتاپ
اکنون دو نقطه شکست داریم: 600px و 768px. چیدمان دقیق تر می شود.
<style>
@media (min-width: 600px) {
.header {
grid-area: 1 / span 6;
}
.menu {
grid-area: 2 / span 1;
}
.content {
grid-area: 2 / span 4;
}
.facts {
grid-area: 3 / span 6;
}
.footer {
grid-area: 4 / span 6;
}
}
@media (min-width: 768px) {
.header {
grid-area: 1 / span 6;
}
.menu {
grid-area: 2 / span 1;
}
.content {
grid-area: 2 / span 4;
}
.facts {
grid-area: 2 / span 1;
}
.footer {
grid-area: 3 / span 6;
}
}
</style>
بازه های رایج دستگاه ها
می توان گروه های رایج را هدف گرفت. این بازه ها ساده و کاربردی اند.
<style>
/* Extra small: تا 600px */
@media only screen and (max-width: 600px) {
/* ... */
}
/* Small: از 600px به بالا */
@media only screen and (min-width: 600px) {
/* ... */
}
/* Medium: از 768px به بالا */
@media only screen and (min-width: 768px) {
/* ... */
}
/* Large: از 992px به بالا */
@media only screen and (min-width: 992px) {
/* ... */
}
/* X-Large: از 1200px به بالا */
@media only screen and (min-width: 1200px) {
/* ... */
}
</style>
تغییر بر اساس جهت صفحه
اگر جهت «landscape» بود، پس زمینه عوض می شود. این برای تبلت مفید است.
<style>
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
پنهان سازی عناصر در صفحه کوچک
گاهی باید چیزی را روی موبایل مخفی کنیم. از max-width استفاده کن.
<style>
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
تغییر اندازه فونت با breakpoint
برای تیتر بزرگ تر روی نمایشگر پهن، حداقل عرض را چک کن.
<style>
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
ترجیحات کاربر: کاهش حرکت
برخی کاربران حرکت کمتر می خواهند. از «prefers-reduced-motion» استفاده کن.
<style>
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
گام های عملی
- viewport را در <head> تنظیم کن.
- چیدمان پایه را با Grid یا Flex بساز.
- Breakpoint های منطقی تعریف کن.
- اندازه ها را نسبی انتخاب کن.
- ترجیحات کاربر را رعایت کن.
نکته: تعداد breakpoint ها را کم نگه دار. سپس بر اساس محتوا تنظیم کن.
جمع بندی سریع
- پرس وجوهای رسانه ای مغز RWD است.
- Breakpoint ها تغییر چیدمان را مدیریت می کنند.
- بازه های رایج کافی و ساده اند.
- به جهت و ترجیحات کاربر احترام بگذار.
برای شبکه واکنش گرا به چیدمان شبکه واکنش گرا برو. همچنین «نما» را در نما (Viewport) ببین. مقدمه کامل در واکنش گرا (RWD Intro) است.