How to make react app with pixel sizing adapt to different screen sizes?

Question

I've been making a website with react and I've been using css with classNames. I also was following a figma document where the figma screens were a certain size lets say x pixels by y pixels. But, on other computers, it might have a larger or smaller pixel dimension (a pixels by b pixels). I've used the x by y pixel for div dimensions as well as button sizes and more. So, when I open my application on other computers with a larger pixel dimension, a portion of the screen is just white, and it still displays the website as if it were on a smaller screen. Is there a way to fix this so that even though I used pixel values my app will adjust to different sized screens? Or, do I have to go back and change everything to percentages?

Answer 1

You need to think about proportion when building your UI.

1- Use percentage(%) for width and aspectRatio for height, or vice versa.

container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}

2- Use flex for the jobs percentage can't do. For example, if you have arbitrary size of items in a list and you want them to share equal sizes. Assign each of them with flex: 1

3- Use rem from EStyleSheet instead of pixels. rem is a scale factor. For example, if your rem is 2 and your “11rem” will become “11*2” = “22”. If we make rem proportion to the screen sizes, your UI will scale with any screen sizes.

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
enter code here
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}

4- Use scrollView for contents that could potentially scale out of the boxes. For example, a TextView

5- Every time you think about using pixels, consider use rem in method 3.