So yesterday I discovered that by using VW/VH measurements instead of px, my design is translating a lot better between different screen sizes, however it seems that my height between two rows of the same paragraph is different on different size screens.
I have a few questions:
I have my original design on Adobe XD, the measurements are all in pixels. I am using an online converter to convert these measurements to VW/VH respectively. Is there a more accurate/efficient way around this, is there something I am missing?
For margin values, would you use VH/VW measurements.
I have been using VH for font size, should I use EM and will this unit of measurement change the font in relation to the screen size.
Would it be okay to use px for font but with a line height measurement.
The last question, I was studying the free templates provided by webflow and testing to see the outcome of viewing them on different devices. They worked perfectly on a range of different screen sizes despite the measurements being in px. For example, the width of a div block containing text was set to 1140px with an 80%. How come this allows the design to look the same despite the screen size being different if the VH/VW units are not being used.
Any help would be greatly appreciated as I am spending hours on this here trying to understand it and getting absolutely nowhere in the process!