react-native-toolkit/react-native-responsive-dimensions

responsiveScreenFontSize(f) What is the unit of f? tks

khunghang16 opened this issue ยท 7 comments

responsiveScreenFontSize(f) What is the unit of f? tks

How can I convert fontsize 14 to % of total screen size? tks

f would be the % of screen size, so responsiveScreenFontSize(14) would net you 14% total screen size.

f would be the % of screen size, so responsiveScreenFontSize(14) would net you 14% total screen size.

Tks. So if in design, I have a text fontsize 14 , I should set style fontSizt: responsiveScreenFontSize(14)?

Not quite, that would just be fontSize:14 -- responsiveScreenFontSize is used to automatically calculate your font sizes in relationship to your device size.

fontSize:14 = font size 14px
fontSize:responsiveScreenFontSize(14) = font size 14% total screen width.

Hope that helps!

Not quite, that would just be fontSize:14 -- responsiveScreenFontSize is used to automatically calculate your font sizes in relationship to your device size.

fontSize:14 = font size 14px
fontSize:responsiveScreenFontSize(14) = font size 14% total screen width.

Hope that helps!

So How can I calculate the 14px by how many % of the screen?

Not quite, that would just be fontSize:14 -- responsiveScreenFontSize is used to automatically calculate your font sizes in relationship to your device size.
fontSize:14 = font size 14px
fontSize:responsiveScreenFontSize(14) = font size 14% total screen width.
Hope that helps!

So How can I calculate the 14px by how many % of the screen?

Hi @khunghang16

responsiveScreenFontSize cannot be directly used to calculate the reverse of the screen percentage.

If you want to know what value of x in x% of the screen size produces 14px
The calculation should be

const x = (14 * 100) / responsiveScreenWidth(100)

This will get you the value of x for which the size is 14px.

However, not sure why you are trying to achieve it. If you want to lock your sizes to 14px, you can do

const fontSize = Math.max(14, responsiveScreenFontSize(14));

This will ensure the fontSize doesn't fall below 14.

Also using responsiveFontSize instead of responsiveScreenFontSize would be a better idea in most cases as users perceive your app through the available "window" size & not the "screen" size

Not quite, that would just be fontSize:14 -- responsiveScreenFontSize is used to automatically calculate your font sizes in relationship to your device size.
fontSize:14 = font size 14px
fontSize:responsiveScreenFontSize(14) = font size 14% total screen width.
Hope that helps!

So How can I calculate the 14px by how many % of the screen?

Hi @khunghang16

responsiveScreenFontSize cannot be directly used to calculate the reverse of the screen percentage.

If you want to know what value of x in x% of the screen size produces 14px
The calculation should be

const x = (14 * 100) / responsiveScreenWidth(100)

This will get you the value of x for which the size is 14px.

However, not sure why you are trying to achieve it. If you want to lock your sizes to 14px, you can do

const fontSize = Math.max(14, responsiveScreenFontSize(14));

This will ensure the fontSize doesn't fall below 14.

Also using responsiveFontSize instead of responsiveScreenFontSize would be a better idea in most cases as users perceive your app through the available "window" size & not the "screen" size

Thank you very much!