For example I want to set the height of a button and make it 20% of the devices’s vertical viewport. I can go and change it in the CSS file. But that doesn’t take different screensizes into account. For example setting the attribute “height” of that button (or any other element) to 20%, but that means it is 20% of it’s parent element, but not the height of the screen size of a given device. I can set it to a specific value in px. But that means the button’s height is fixed.
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body'), viewPortWidth = w.innerWidth || e.clientWidth || g.clientWidth, viewPortHeigth = w.innerHeight|| e.clientHeight|| g.clientHeight; button.height = viewPortHeigth * .2 + "px";// height of button will be dependent on device's viewport height
But I wonder whether there is another method that is recommended by experienced developers or the ionic team.
How can I set certain elements to a certain value relative to the device’s size.