Hi,
I'm creating a project on Perspective for the plant where I work, which means people are opening the project on different computers with different resolutions.
I'm trying to improve the rendering of my project, and for that I'm changing my views to coordinate containers with the 'percent' mode so that it adapts more easily to the different resolutions of the computers.
Problem is, only the form of the component adapt to the resolutions, but not the size of the text, so for small resolutions it's awful.
I don't find a way to change the size of the text to 'percent' instead of 'px', I don't know if it's possible.
But maybe the coordinate view in 'percent' is not the best way, what do you usually use ?
I'm not trying to adapt it for smartphone, not that small, but for resolutions like 1280, 1440, 1920 (so I don't think breackPoint container is the solution).
Thanks
One good tip (depending on context) is to use Flex containers - the layout adapts to different screen sizes much better (although it won't help with font sizes much). I don't work with Coordinate containers very much, though, so I'm by no means an expert on them - I just default to Flex unless I have a very good reason not to.
Try this:
Yeah but even in flex containers, the font size doesn't change with the resolution unfortunately
I tried but it's still not working 
but maybe it can lead me to the way for the solution, maybe I just have to find the good unit, I will research for that
This works for me, just mess with the parameters a bit.
clamp(6px, 1 * (1.0vmin + 1.0vmax), 16px)
It should go without saying that you should use a style for this so you can change it for all text later and it updates everywhere. Also, probably want to define a couple of text styles so you can apply say a "Label" style and a "Title" style and have them sized accordingly, relative to eachother.
I tried it but with 2 different resolutions I still had my problem, the size did not fit. However, when I was resizing my page manually the font size was changing so the dynamic is working in a way.
ā
But I found a solution that it seems to solve my problem.
I wrote a little script for fontSize property, and the font size is now adapting to the resolution and the size of the view based on the width of the page:
The formula is simple, for a width of 1920 I want a size of 20px, so I use this ratio to calculate the font size.
Thanks for your help!
Are you using Chrome's emulator to test mobile resolutions as well?
Well for now we are not using mobiles, only computers, so no. We'll be using some tablets later but they have a FHD resolution if I remember, so I don't think we should have problems. But thanks to let me know about that!