matchMediaQuery / watchMediaQuery

یک مدیا کوئری CSS را از جاوااسکریپت می‌خواند و مشترکش می‌شود.

برای تصمیم‌های چیدمانی این‌ها را بر isMobile() ترجیح دهید: بو کشیدن UA دستگاه را می‌شناسد و مدیا کوئری قاب دید را؛ و وقتی مرورگر رومیزی باریک می‌شود یا تبلت می‌چرخد، تنها دومی درست است.

API

تابع	توضیح
matchMediaQuery(query)	آیا این کوئری همین حالا می‌خواند؟ در SSR برابر false
watchMediaQuery(query, callback)	تغییرها را مشترک می‌شود؛ تابعی برای لغو اشتراک برمی‌گرداند
MOBILE_MEDIA_QUERY	'(max-width: 768px)'، نقطه شکست مشترک موبایل

نمونه

import { MOBILE_MEDIA_QUERY, watchMediaQuery } from 'ranuts';

const off = watchMediaQuery(MOBILE_MEDIA_QUERY, (isMobile) => render(isMobile));
onCleanup(off);

یادداشت‌ها

1. کال‌بک یک بار و همگام با مقدار کنونی صدا زده می‌شود، پس هرگز لازم نیست وضعیت آغازین را جداگانه بخوانید.
2. همیشه اشتراک را لغو کنید. شنونده MediaQueryListی که آزاد نشود، بستار (و هر DOMی که گرفته) را زنده نگه می‌دارد.
3. سافاری قدیمی هم دیده شده است. addEventListener روی MediaQueryList تازه در سافاری ۱۴ آمد؛ به‌عنوان جایگزین از addListener/removeListener استفاده می‌شود.