setFontSize2html

اندازهٔ قلمِ ریشه یعنی <html> را به تناسب دیدگاه تنظیم می‌کند تا طرحی که با پهنای ثابت (۳۷۵ پیکسل، پهنای متداول طرح‌های موبایل) کشیده شده، با نمایشگر واقعی بزرگ و کوچک شود؛ همان شیوهٔ آشنای «rem منعطف» برای چیدمان‌های موبایلی که با یکای rem ساخته می‌شوند.

کاربرد

import { setFontSize2html } from 'ranuts/utils';

setFontSize2html(); // پهنای طرح به‌طور پیش‌فرض ۳۷۵ پیکسل است
// یا، برای طرحی با پهنای دیگر:
setFontSize2html(414);

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

css

/* جعبه‌ای که در طرحِ ۳۷۵ پیکسلی با ۲۰۰ پیکسل کشیده شده است */
.box {
  width: 5.33333rem; /* 200 / 375 * 100 */
}

API

`setFontSize2html(designWidth?)`

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
`designWidth`	پهنایی (به پیکسل) که طرح با آن ساخته شده است	`number`	`375`

بازگشت

بدون مقدار بازگشتی (void). همچون اثر جانبی، documentElement.style.fontSize را تنظیم می‌کند و شنونده‌های resize و orientationchange خودش را می‌نشاند.

یادداشت‌ها

برای iPad پایهٔ دیگری خودبه‌خود برگزیده می‌شود. وقتی currentDevice() از iPad خبر دهد، به‌جای designWidthای که داده‌اید، پهنای طرح و نسبت ابعاد به 768 / 1024:768 می‌رود. این تابع به‌طور پیش‌فرض طرح گوشی را فرض می‌گیرد و تنها همین یک استثنای پرتکرار را جبران می‌کند.
راهی برای برچیدن نیست. برخلاف بیشتر کمک‌کارهای این کتابخانه که شنونده می‌نشانند، setFontSize2html تابعی برای لغو برنمی‌گرداند. ساخته شده تا یک بار برای تمام عمر صفحه صدا زده شود، نه اینکه به مؤلفه‌ای که سوار و پیاده می‌شود گره بخورد.
به document و window نیاز دارد؛ اگر این کد ممکن است در SSR اجرا شود، محل فراخوانی را نگه دارید.
با یک گام ساخت CSS (مانند postcss-pxtorem) جفت می‌شود که مقدارهای px طرح را با همان پایه به rem برمی‌گرداند. setFontSize2html تنها اندازهٔ قلم ریشه را تنظیم می‌کند و شیوه‌نامهٔ شما را تبدیل نمی‌کند.

setFontSize2html ​

کاربرد ​

API ​

setFontSize2html(designWidth?) ​

پارامترها ​

بازگشت ​

یادداشت‌ها ​