Giters

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

Resposive fontSize, height and width for react-native components, that automatically adjusts itself based on screen-size of the device.

Home Page:https://www.npmjs.com/package/react-native-responsive-dimensions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

khunghang16 opened this issue · comments

commented
commented

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

commented

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

commented

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)?

commented

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!

commented

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?

commented

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

commented

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!